<html> <head> <title>day03</title> <script type="text/javascript" language="javascript" src="js/myjs.js"></script> <link type="text/css" rel="stylesheet" href="css/mycss.css"/> <style> table{ border-collapse:collapse; } td{ border:1px solid gray; } tr input{ width:25px; } </style> </head> <body onload="testNode()"> <form> <h2>表单的验证与提交</h2> 管理员账号:<input id="account" class="txt" onfocus="this.className='txt_focus';" onblur="valiAcc(this)"/> <span id="accountInfo">10个长度以内的字母、数字的组合</span><br/> 电话号码:<input id="phone" class="txt" onfocus="this.className='txt_focus';" onblur="valiPhone(this)"/> <span id="phoneInfo">形如:010-12345678</span><br/><br/> <input type="submit" value="保存" onclick="alert(valiAll())" /> <h2>节点查询展示</h2> <div id="div01"> <p id="p01">我是段落1</p> <p id="p02">我是段落2</p> <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 </div> <input type="radio" name="sex"/>无 <h2>购物车</h2> <table id="shoppingCar"> <tr> <td style="width:100px;">商品名称</td> <td style="width:100px;">单价</td> <td style="width:200px;">数量</td> <td style="width:100px;">小计</td> </tr> <tr> <td style="width:100px;">book1</td> <td style="width:100px;">10.0</td> <td style="width:200px;"> <input type="button" value="-" onclick="decrease(this)"/> <input type="text" value="1" readonly="readonly"/> <input type="button" value="+" onclick="increase(this)"/> </td> <td style="width:100px;">10.0</td> </tr> <tr> <td style="width:100px;">book2</td> <td style="width:100px;">5.0</td> <td style="width:200px;"> <input type="button" value="-" onclick="decrease(this)"/> <input type="text" value="1" readonly="readonly"/> <input type="button" value="+" onclick="increase(this)"/> </td> <td style="width:100px;">5.0</td> </tr> <tr> <td style="width:100px;">book3</td> <td style="width:100px;">15.0</td> <td style="width:200px;"> <input type="button" value="-" onclick="decrease(this)"/> <input type="text" value="1" readonly="readonly"/> <input type="button" value="+" onclick="increase(this)"/> </td> <td style="width:100px;">15.0</td> </tr> <tr> <td colspan="3" style="text-align:right" >总计:</td> <td>30.0</td> </tr> </table> <h2>节点增加展示</h2> <div id="div02"> <p>我是第1个段落</p> </div> <input type="button" value="增加段落" onclick="addNode()"/> <input type="button" value="首行增加段落" onclick="addNode2()"/> <input type="button" value="删除段落" onclick="deleteNode()"/> <h2>动态创建页面元素</h2> <input type="button" onclick="productNode(this)" value="添加新元素"/> </form> </body> </html>
function valiAcc(obj){ obj.className= "txt"; var account = obj.value; var regex = /^[0-9a-zA-Z]{1,10}$/g; var flag = regex.test(account); //判断 if(flag){ document.getElementById("accountInfo").className="vali_success"; document.getElementById("accountInfo").innerText=""; }else{ document.getElementById("accountInfo").className="vali_fail"; document.getElementById("accountInfo").innerText="10个长度以内的字母、数字组合"; } return flag; } function valiPhone(obj){ obj.className= "txt"; var account = obj.value; var regex = /^\d{3}}$/g; var flag = regex.test(account); //判断 if(flag){ document.getElementById("phoneInfo").className="vali_success"; document.getElementById("phoneInfo").innerText=""; }else{ document.getElementById("phoneInfo").className="vali_fail"; document.getElementById("phoneInfo").innerText="形如:010-12345678"; } return flag; } function valiAll(){ var acc = document.getElementById("account"); var phone = document.getElementById("phone"); return valiAcc(acc) && valiPhone(phone); } function testNode(){ var divObj = document.getElementById("div01"); var parentNode = divObj.parentNode; //console.log(parentNode.nodeName+","+parentNode.nodeType); var nodeArr = divObj.childNodes; for(var i = 0;i<nodeArr.length;i++){ //console.log(nodeArr[i].nodeName+","+nodeArr[i].nodeType); } var p02 = document.getElementById("p02"); var p01 = p02.previousSibling.previousSibling; //console.log(p01.nodeName+","+p01.nodeType); var sexArr = document.getElementsByName("sex"); //console.log(sexArr.length); var inputArr = document.getElementsByTagName("input"); var inputAr= divObj.getElementsByTagName("input"); console.log(inputAr.length); } //购物车减 function decrease(obj){ var txtObj = obj.nextSibling.nextSibling; //nextSibling 获取下一个节点 if(txtObj.value>0){ txtObj.value--; } cal(); } //购物车加 function increase(obj){ var txtObj = obj.previousSibling.previousSibling; //previousSibling 获取上一个节点 txtObj.value++; cal(); } function cal(){ var tbObj = document.getElementById("shoppingCar"); //获取table对象 var trArr = tbObj.getElementsByTagName("tr"); //获取所有的行对象 //定一个计数器,用存储总价值 var totalPrice = 0; for(var i=1;i<trArr.length-1;i++){ //获取当前行对象 var trObj = trArr[i]; //获取单价 var price = trObj.getElementsByTagName("td")[1].innerText; //获取数量 var num = trObj.getElementsByTagName("input")[1].value; //当前商品的小计 var xj = price*num; //给小计栏赋值 var tdArr = trObj.getElementsByTagName("td"); tdArr[tdArr.length-1].innerText = xj.toFixed(2); totalPrice += xj; } trArr[trArr.length-1].lastChild.previousSibling.innerText = totalPrice.toFixed(2); } var n = 1; function addNode(){ n++; var divObj = document.getElementById("div02"); var pObj = document.createElement("p"); // <p></p> pObj.innerText="我是第"+n+"个段落"; divObj.appendChild(pObj); } function addNode2(){ var divObj = document.getElementById("div02"); var pObj = document.createElement("p"); pObj.innerText="我是第"+0+"个段落"; divObj.insertBefore(pObj,divObj.getElementsByTagName("p")[0]); } function deleteNode(){ if(n>0){ n--; } var divObj = document.getElementById("div02"); var pArr = divObj.getElementsByTagName("p"); if(pArr.length>0){ divObj.removeChild(pArr[pArr.length-1]); } } function productNode(obj){ var newButton = document.createElement("input"); //<input></input> newButton.type="button"; newButton.value="New Button"; newButton.onclick=function(){ alert("hello"); } obj.parentNode.insertBefore(newButton,obj); var aObj=document.createElement("a"); aObj.innerHTML="to百度"; aObj.target="_blank"; aObj.href="http://www.baidu.com"; obj.parentNode.appendChild(aObj); }