Question

我是JavaScript的新手，所以如果我没有解释我想要的东西，请耐心等待。所以基本上我有一个用于创建活动的表单，因此每当用户填写字段并点击保存时，它将创建包含信息的div的实例。现在这些信息基本上只是排成一行，我想将它们组织在一个方框（div）中，但我不知道如何创建它，是使用JS还是HTMl？

这是我现在正在工作的图片。

这是代码的视图。

window.onload = function() {
function addAct(nameact, when, where,desc) {
var buses = document.querySelectorAll(".bus");
var curr = document.createElement("div");
curr.setAttribute("class", "name");
var p0 = document.createElement("p");
p0.setAttribute("class", "nameact");
p0.innerHTML = nameact;
var p1 = document.createElement("p");
p1.setAttribute("class", "whereisit");
p1.innerHTML = when;
var p2 = document.createElement("p");
p2.setAttribute("class", "when");
p2.innerHTML = where;
var p3 = document.createElement("p");
p3.setAttribute("class", "describtion");
p3.innerHTML = desc;
curr.appendChild(p0);
curr.appendChild(p1);
curr.appendChild(p2);
curr.appendChild(p3);
if (buses.length) {
  buses[buses.length -1].insertAdjacentHTML("afterEnd", curr.outerHTML)
} else {
  document.forms[1].insertAdjacentHTML("afterEnd", curr.outerHTML)
}
}

var obj = {nameact: "", when: "", where: "",desc:""};

document.forms[1].onchange = function(e) {
 obj[e.target.name] = e.target.value;
 }

document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}
}

<section id="cd-placeholder-2" class="cd-section cd-container">
        <h2>Activities</h2>     
        <div id="Slider" class="slide-up">
            <div>
                <div class="contents" >


        <form class="form2">

                      <div class="col-3">
                        <label>
                          Activity Name
                          <input placeholder="What is your activity?" tabindex="3" name="nameact" />
                        </label>
                      </div>

                      <div class="col-3">
                        <label>
                          Where?
                          <input placeholder="Where is it going to be?" tabindex="4" name="when" />
                        </label>
                      </div>

                      <div class="col-3">
                        <label>
                          When?
                          <input type="date" placeholder="mm\dd\yy" tabindex="4" name="where"/>
                        </label>
                      </div>

                      <div>
                        <label>
                          Care to share more?
                          <textarea placeholder="describtion of your activity" class="text" name="desc"></textarea>
                        </label>
                      </div>

                        <button type="submit" value="Submit" class="cd-btn" id="col-submit" style="position:relative;float:right;overflow:hidden;margin:10px;margin-top:30px;">Add Activity</button>


        </form>

                    <div id="name"></div>

                </div>
            </div>
        </div>

    </section>

任何反馈都非常感谢。

Answer 1

您需要HTML + CSS + JS

HTML：

<div id="name"></div>

CSS

.row{
    background-color: red;
    border: 5px solid #333;
    display: block;
    position: relative;
    overflow: hidden;
}
.nameact{
    background-color:red;
    height: 40px;
    display: inline-block;
}
.whereisit{
    background-color:green;
    height: 40px;
    display: inline-block;
}
.when{
    background-color:blue;
    height: 40px;
    display: inline-block;
 }
.describtion{
    background-color:brown;
    height: 40px;
    display: inline-block;
}

JS

var obj = {nameact: "", when: "", where: "",desc:""};

document.forms[1].onchange = function(e) {
 obj[e.target.name] = e.target.value;
 }

document.forms[1].onsubmit = function(e) {
e.preventDefault();
addAct(obj.nameact, obj.when, obj.where, obj.desc)
}

function addAct(nameact, when, where,desc) {
var myhtml = '<div class="row"><div class="nameact">'+nameact+'</div><div class="whereisit">'+where+'</div><div class="when">'+when+'</div><div class="describtion">'+describtion+'</div></div>';

document.getElementById('name').innerHTML += myhtml;

}

您需要根据需要更新CSS代码

Answer 2

如果您需要任何帮助，请告知我们。我写了几个CSS样式，以及它们将应用于的html标记。让你的javascript生成这个标记，并做一些关于CSS的阅读，将其推断为一个完整的模块。

<style>
    .activity {
        width: 645px;
        height: 160px;
        border: 2px solid #0000ff;
    }

    .activity > div {
        padding: 20px;
    }

    .activity .top {
        display: inline-block;
        float: left;
        width: 174px;
        height: 30;
        border-right: 1px solid #0000ff;
    }

    .activity .top.end {
        width: 175px;
        border-right: none;
    }

    .activity .bottom {
        display: inline-block;
        float: left;
        width: 605px;
        height: 50;
        border-top: 1px solid #0000ff;
    }

    .activity .title {
        display: block;
    }


</style>


<div class="activity">
    <div class="top">
        <span class="title">ACTIVITY NAME</span>
        <span>Skydiving</span>
    </div>

    <div class="top">
        <span class="title">WHERE?</span>
        <span>Dubai Palm Island</span>
    </div>

    <div class="top end">
        <span class="title">2017-06-22</span>
    </div>

    <div class="bottom">
        <span>CARE TO SHARE MORE?</span>
        <span class="title">It will be a fun trip!</span>
    </div>
</div>

我希望这会让你朝着正确的方向前进！

如何在框内包装div的实例

2 个答案: