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树:由文档及文档中的所以元素(标签 ...

随机推荐

jmeter3.3测试需要登录的接口（java）
1.新建线程组-略过 2.右键线程组->添加->配置元件->HTTP授权管理器 3.右键线程组->添加->配置元件->HTTP信息头管理器 4.右键线程组-> ...
shell查找指定时间段内的文件
#!/bin/bash#20170905 输入参数格式echo "显示"$1"的备份文件"date_0=$1date_1=`expr $date_0 + 1`d ...
Mybatis #{ } 和 ${ } 区别
动态 SQL 是 Mybatis 的强大特性之一,也是它优于其他 ORM 框架的一个重要原因.Mybatis 在对 sql 语句进行预编译之前,会对 sql 进行动态解析,解析为一个 BoundSql ...
netty4.x 传输文件
一:简介 netty传输文件的例子并不多,当前的项目刚才需要使用netty,所以就记录一下使用方法,使用netty传输文件,首先需要启动一个服务端,等待服务端请求监听,然后传输文件的时候,启动一个客户 ...
Java数据结构和算法总结-冒泡排序、选择排序、插入排序算法分析
前言:排序在算法中的地位自然不必多说,在许多工作中都用到了排序,就像学生成绩统计名次.商城商品销量排名.新闻的搜索热度排名等等.也正因为排序的应用范围如此之广,引起了许多人深入研究它的兴趣,直至今天, ...
UWP brush
---some words---- 1.Alpha:透明度 2.Argb :Alpha red green blue 3.brush: [brʌʃ] 刷子,笔画,笔刷 4.fore 前头 5.F ...
Ionic3学习笔记（三）禁止横屏
本文为原创文章,转载请标明出处目录安装使用参数 1. 安装命令行输入 ionic cordova plugin add cordova-plugin-screen-orientation n ...
Codeforces Round #420 (Div. 2)
/*************************************************************************************************** ...
libsvn_subr-1.so.0: undefined symbol: apr_atomic_xchgptr 故障解决
源码编译安装完成之后,查看svn的安装版本会报以下错误 svn: symbol lookup error: /usr/local/subversion/lib/libsvn_subr-.so.: un ...
Elixir游戏服设计四
上章说到我们要引入syn https://github.com/ostinelli/syn/ 看过文档,它并没有直接提供{via, Module, Name} 相关的方法.我们需要封装一下. Name ...

HTML DOM应用案例2

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

随机推荐

热门专题