JS含个人理解：追加（添加）一级超链接标签，三级联动菜单，追加评论功能【诗书画唱】
JS外部分：
window.onload = function() {
}
JS内部分：
var ul = document.getElementsByTagName("ul")[0];
var inputs = document.getElementsByTagName("input")[0];
inputs.onclick = function() {
var neirong = window.prompt("请输入添加的内容");
var c_li = document.createElement("li");
var c_a = document.createElement("a");
c_a.setAttribute("href", "#");
var neirong = document.createTextNode(neirong);
c_a.appendChild(neirong);
c_li.appendChild(c_a);
ul.appendChild(c_li);
}
CSS部分：
li {
float: left;
list-style: none;
padding: 15px;
}
HTML部分：
<body>
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">商品分类</a>
</li>
<li>
<a href="#">关于我们</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
</ul>
<div>
<br /><br /><br />
<input type="button" value="添加标题内容" />
</div>
</body>
三级联动菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
省：<select>
<option>
请选择省
</option>
</select>
市：<select>
<option>
请选择市
</option>
</select>
区：<select>
<option>
请选择区
</option>
</select>
</div>
<script>
// 个人理解：之所以设置为10001,100011,100012这样的编号是为了用for循环,
// 改变成对应的下标,进而生成对应的值的下拉框选项等
var city = [
{
"id": 10001,
"name": "陕西省",
"child": [
{
"id": 100011,
"name": "西安市",
"child": [
{
"id": 100011,
"name": "高新区"
},
{
"id": 100011,
"name": "未央区"
}
]
},
{
"id": 100012,
"name": "宝鸡市",
"child": [
{
"id": 100011,
"name": "高新区"
},
{
"id": 100011,
"name": "成仓区"
}
]
}
]
},
{
"id": 10002,
"name": "甘肃省",
"child": [
{
"id": 100021,
"name": "兰州市",
"child": [
{
"id": 100021,
"name": "兰州区1"
},
{
"id": 100021,
"name": "兰州区2"
}
]
},
{
"id": 100022,
"name": "酒泉市",
"child": [
{
"id": 100021,
"name": "酒泉区1"
},
{
"id": 100021,
"name": "酒泉区2"
}
]
}
]
}
]
var sheng = document.getElementsByClassName("sheng")[0];
var shi = document.getElementsByClassName("shi")[0];
var qu = document.getElementsByClassName("qu")[0];
var nowShengIndex = 0;
// 下拉框选项
//
//Dropdown options
//xiaBiaoKeyIndex:下标,Key,索引
for(var i=0;i<city.length;i++){
var optEle = new Option(city[i].name,i);
console.log(optEle.innerHTML);
sheng.appendChild(optEle)
}
sheng.onchange=function(){
shi.options.length = 1;
qu.options.length = 1;
//this.value可取到当前所选值对应的索引
for(var xiaBiaoKeyIndex=0;xiaBiaoKeyIndex<city[this.value].child.length;xiaBiaoKeyIndex++){
var DropDownOptions = new Option(city[this.value].child[xiaBiaoKeyIndex].name,xiaBiaoKeyIndex);
// 下拉框选项会随下标,对应的Key键 xiaBiaoKeyIndex,而生成对应的值等，appendChild是用来添加下拉框选项的。
shi.appendChild(DropDownOptions)
}
nowShengIndex = this.value;
};
shi.onchange=function () {
qu.options.length = 1;
console.log(qu);
for(var i=0;i<city[nowShengIndex].child[this.value].child.length;i++){
var DropDownOptions = new Option(city[nowShengIndex].child[this.value].child[i].name,i);
qu.appendChild(DropDownOptions )
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#All {
width:455px;
height:400px;
margin:0 auto;
border:solid 1px red;
background-color: palevioletred;
/*padding-left: 20px;*/
}
.wenBenYu {
width:450px;
height:150px;
}
.pingLunQu {
background:pink;
}
#ziShuWenZi {
float:right;
}
button {
color: white;
background-color: red;
width: 50px;
/*border-style: none;
用于去除按钮的边框
* */
}
li{list-style:none}
</style>
<script>
// JS方法等内容必须写在window.onload=function(){}里面,不然会报错等
window.onload=function() {
var wenBenYu = document.getElementsByClassName('wenBenYu')[0];
var button = document.getElementsByTagName('button')[0];
var pingLunQu = document.getElementsByClassName('pingLunQu')[0];
var ziShuWenZi = document.getElementById('ziShuWenZi');
wenBenYu.onblur = function() {
wenBenYu.style.width = '450px';
wenBenYu.style.heigth = '150px'
}
wenBenYu.oninput = function() {
ziShuWenZi.innerHTML = wenBenYu.value.length;
}
button.onclick = function() {
if (wenBenYu.value == '') {
confirm('你确定不出入内容吗')
return false;
} else {
var ul = document.createElement('ul');
pingLunQu.appendChild(ul);
var li = document.createElement('li');
ul.appendChild(li);
li.innerHTML = wenBenYu.value;
wenBenYu.value = ''
var li = document.createElement('li');
ul.appendChild(li);
//
// var date = new Date();
// li.innerHTML = date.toLocaleDateString();
var dangQian=new Date();
var year=dangQian. getFullYear();
var month=dangQian. getMonth()+1;
var day=dangQian. getDate();
var zhouji=dangQian. getDay();
var xiaoshi=dangQian . getHours();
var fenzhong=dangQian . getMinutes();
var miao=dangQian. getSeconds();
li.innerHTML ="当前你评论的时间为"+year+"年"
+month+"月"+day+"日"+xiaoshi+"时"+fenzhong+"分"+miao+"秒";
// chaoLianJi:超链接
var chaoLianJie = document.createElement('a');
li.appendChild(chaoLianJie);
chaoLianJie.innerHTML = '删除';
chaoLianJie.style.float = 'right';
chaoLianJie.style.href = '#'
chaoLianJie.style.color = "red"
chaoLianJie.style.cursor = 'pointer'
}
chaoLianJie.onclick = function() {
chaoLianJie.parentNode.parentNode.remove()
}
}}
</script>
</head>
<body>
<div id="All">
<p>b站up主“诗书画唱”提示你！请输入你要显示评论内容：</p>
<textarea class="wenBenYu"></textarea><br>
<button>提交评论</button><span id="ziShuWenZi">0</span>
<p class="pingLunQu">b站up主“诗书画唱”的评论区:</p>
</div>
</body>
</html>
