JS含個(gè)人理解：追加（添加）一級(jí)超鏈接標(biāo)簽，三級(jí)聯(lián)動(dòng)菜單，追加評(píng)論功能【詩(shī)書畫唱】
JS外部分：
window.onload = function() {
}
JS內(nèi)部分：
var ul = document.getElementsByTagName("ul")[0];
var inputs = document.getElementsByTagName("input")[0];
inputs.onclick = function() {
var neirong = window.prompt("請(qǐng)輸入添加的內(nèi)容");
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="#">首頁(yè)</a>
</li>
<li>
<a href="#">商品分類</a>
</li>
<li>
<a href="#">關(guān)于我們</a>
</li>
<li>
<a href="#">聯(lián)系我們</a>
</li>
</ul>
<div>
<br /><br /><br />
<input type="button" value="添加標(biāo)題內(nèi)容" />
</div>
</body>
三級(jí)聯(lián)動(dòng)菜單
<!DOCTYPE html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title></title>
</head>
<body>
<div>
? ? ?。?lt;select>
? ? <option>
? ? ? ?請(qǐng)選擇省
? ? </option>
</select>
? ? 市：<select>
? ? <option>
? ? ? ? 請(qǐng)選擇市
? ? </option>
</select>
? ? 區(qū)：<select>
? ? <option>
? ? ? ? 請(qǐng)選擇區(qū)
? ? </option>
</select>
</div>
<script>
// 個(gè)人理解：之所以設(shè)置為10001,100011,100012這樣的編號(hào)是為了用for循環(huán),
// 改變成對(duì)應(yīng)的下標(biāo),進(jìn)而生成對(duì)應(yīng)的值的下拉框選項(xiàng)等
? ? var city = [
? ? ? ? {
? ? ? ? ? ? "id": 10001,
? ? ? ? ? ? "name": "陜西省",
? ? ? ? ? ? "child": [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? "id": 100011,
? ? ? ? ? ? ? ? ? ? "name": "西安市",
? ? ? ? ? ? ? ? ? ? "child": [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": 100011,
? ? ? ? ? ? ? ? ? ? ? ? ? ? "name": "高新區(qū)"
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": 100011,
? ? ? ? ? ? ? ? ? ? ? ? ? ? "name": "未央?yún)^(qū)"
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? "id": 100012,
? ? ? ? ? ? ? ? ? ? "name": "寶雞市",
? ? ? ? ? ? ? ? ? ? "child": [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": 100011,
? ? ? ? ? ? ? ? ? ? ? ? ? ? "name": "高新區(qū)"
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": 100011,
? ? ? ? ? ? ? ? ? ? ? ? ? ? "name": "成倉(cāng)區(qū)"
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? },
? ? ? ??
? ? ? ??
? ? ? ??
? ? ? ??
? ? ? ??
? ? ? ? {
? ? ? ? ? ? "id": 10002,
? ? ? ? ? ? "name": "甘肅省",
? ? ? ? ? ? "child": [
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? "id": 100021,
? ? ? ? ? ? ? ? ? ? "name": "蘭州市",
? ? ? ? ? ? ? ? ? ? "child": [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": 100021,
? ? ? ? ? ? ? ? ? ? ? ? ? ? "name": "蘭州區(qū)1"
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": 100021,
? ? ? ? ? ? ? ? ? ? ? ? ? ? "name": "蘭州區(qū)2"
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? "id": 100022,
? ? ? ? ? ? ? ? ? ? "name": "酒泉市",
? ? ? ? ? ? ? ? ? ? "child": [
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": 100021,
? ? ? ? ? ? ? ? ? ? ? ? ? ? "name": "酒泉區(qū)1"
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ? {
? ? ? ? ? ? ? ? ? ? ? ? ? ? "id": 100021,
? ? ? ? ? ? ? ? ? ? ? ? ? ? "name": "酒泉區(qū)2"
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ]
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ]
? ? ? ? }
? ? ]
? ? var sheng = document.getElementsByClassName("sheng")[0];
? ? var shi = document.getElementsByClassName("shi")[0];
? ? var qu = document.getElementsByClassName("qu")[0];
? ? var nowShengIndex = 0;
? ??
? ??
//? 下拉框選項(xiàng)
//
//Dropdown options?
//xiaBiaoKeyIndex:下標(biāo),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可取到當(dāng)前所選值對(duì)應(yīng)的索引
? ? ? for(var xiaBiaoKeyIndex=0;xiaBiaoKeyIndex<city[this.value].child.length;xiaBiaoKeyIndex++){
? ? ? ? ? var DropDownOptions? = new Option(city[this.value].child[xiaBiaoKeyIndex].name,xiaBiaoKeyIndex);
? ? ? ? ??
//? ? ? ?下拉框選項(xiàng)會(huì)隨下標(biāo),對(duì)應(yīng)的Key鍵 xiaBiaoKeyIndex,而生成對(duì)應(yīng)的值等，appendChild是用來(lái)添加下拉框選項(xiàng)的。
? ? ? ? ??
? ? ? ? ? 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方法等內(nèi)容必須寫在window.onload=function(){}里面,不然會(huì)報(bào)錯(cuò)等
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('你確定不出入內(nèi)容嗎')
? ? ? ? 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 ="當(dāng)前你評(píng)論的時(shí)間為"+year+"年"
+month+"月"+day+"日"+xiaoshi+"時(shí)"+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主“詩(shī)書畫唱”提示你！請(qǐng)輸入你要顯示評(píng)論內(nèi)容：</p>
? ? <textarea class="wenBenYu"></textarea><br>
? ? <button>提交評(píng)論</button><span id="ziShuWenZi">0</span>
? ? <p class="pingLunQu">b站up主“詩(shī)書畫唱”的評(píng)論區(qū):</p>
</div>
</body>
</html>
