HTML DOM应用案例2

<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}-\d{8}$/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);
}

猜你喜欢