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}}$/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);
}

HTML DOM应用案例2的更多相关文章

DOM综合案例、SAX解析、StAX解析、DOM4J解析
今日大纲 1.DOM技术对xml的增删操作 2.使用DOM技术完成联系人管理 3.SAX和StAX解析 4.DOM4J解析 5.XPATH介绍 1.DOM的增删操作 1.1.DOM的增加操作 /* * ...
前端JavaScript之DOM使用案例
1.弹出框点击关闭 (这个例子关键自己创建标签以及属性,不是太好想啊,而且作用相对来数也不是太大) <!DOCTYPE html> <html> <head> &l ...
JQuery:JQuery基本语法,JQuery选择器,JQuery DOM,综合案例复选框,综合案例随机图片
知识点梳理课堂讲义 1.JQuery快速入门 1.1.JQuery介绍 jQuery 是一个 JavaScript 库. 框架:Mybatis (jar包) 大工具插件:PageHelper (j ...
DOM操作案例之--全选与反选
全选与反选在表单类的项目中还是很常见的,电商项目中的购物车一定少不了这个功能. 下面我只就用一个简单的案例做个演示吧. <div class="wrap"> <t ...
HTML DOM应用案例1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
JS DOM操作案例
显示隐藏表单文本内容 <input type="text" value="手机"> var text = document.querySelecto ...
JavaScript DOM详解
欢迎转载,转载请标明出处: http://blog.csdn.net/johnny901114/article/details/52727448 本文出自:[余志强的博客] 一.DOM概述 D: Do ...
第二章 JavaScript案例（中）
1. js事件 HTML代码 <!DOCTYPE html> <html lang="en" onUnload="ud()"> < ...
DOM操作1
1.DOM文档对象模型:操作页面元素(标签) html文件看成一个文档,把文档看成一个对象 xml也是一种文档,标签自定义,系统不自带标签,偏向于存储数据 2.DOM树:由文档及文档中的所以元素(标签 ...

随机推荐

JQuery获取图片大小并控制图片文件上传大小以及上图片文件时如何预览图片
首先我们来看效果图: 点击上传之后如下: 在这里我获取到文件的大小,并且如果超出我设定的大小,则禁止上传! 不多说,上代码:先看div布局: <div class="imageCont ...
51nod 2006 飞行员配对(二分图最大匹配) 裸匈牙利算法求二分图最大匹配题
题目: 题目已经说了是最大二分匹配题, 查了一下最大二分匹配题有两种解法, 匈牙利算法和网络流. 看了一下觉得匈牙利算法更好理解, 然后我照着小红书模板打了一遍就过了. 匈牙利算法:先试着把没用过的左 ...
Suneast & Daxia （规律）
Suneast & Daxia Time Limit: 1000MS Memory Limit: 32768KB 64bit IO Format: %I64d & %I64u ...
poj2337欧拉回路要求输出路径
Catenyms Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 8368 Ac ...
C语言判断电脑的大、小端机
#include int main() { int x = 0x1234; if (char(x) == 0x34) { printf("小端机!\n"); } else ...
vue2购物车ch4-(筛选v-for 点击的那个设置样式设为默认地址其他联动非循环的列表选中和非选中删除当前选中的列表)
1 address.html <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
ubuntu中切换到root账号方法
ubuntu如何切换到root用户身份? 前面小编分享了ubuntu怎么开启root用户,下面小编来分享如何切到到root用户方法/步骤按照下面的方式打开终端工具,或者使用终端工具的快捷键Ctrl ...
学习笔记之CSS样式（选择器背景字体边框绝/相对、固定位置and分层流等）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
将 C# 枚举反序列化为 JSON 字符串基础理论
该转换过程需要引用 Newtonsoft.JSON,这其中的转换过程还是蛮有意思的. 一.定义枚举 /// <summary> /// 托寄物品枚举 /// </summary> ...
electron 写入注册表实现开机自启动
windows平台首先先明确:开机自启动写入注册表的位置,在KEY_CURRENT_USER\Software\\Microsoft\\Windows\\CurrentVersion\\Run 打开 ...

HTML DOM应用案例2

HTML DOM应用案例2的更多相关文章

随机推荐

热门专题