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树:由文档及文档中的所以元素(标签 ...
随机推荐
- 第一次安装jshint,jshint新手使用记录
刚刚出来工作的渣渣,第一次进入这样比较正规的公司,各个开发流程都比较严格,代码也是要经过jshint的检测才能上传到svn才能成功打包项目.所以我这种技术都半桶水的职场开发小白,也是第一次用jshin ...
- Quartz源码——Quartz调度器的Misfire处理规则(四)
Quartz调度器的Misfire处理规则 调度器的启动和恢复中使用的misfire机制,还需细化! SimpleTrigger的misfire机制 默认的 Trigger.MISFIRE_INSTR ...
- hdu2222 ac自动机入门
Keywords Search Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) ...
- 简单Elixir游戏服设计- 游戏玩法介绍
抄以前的,做了点修改. 到目前为止,我们完成了玩家的数据和进程建模,现在介绍游戏玩法. 为什么我们还不做客户端接入.协议指定呢?为什么还没有网关和数据存储呢.在我接手的游戏, 这些通常已经定下来了,我 ...
- 非对称加密RSA的C#实现
1.对称加密算法 对称加密是最快速.最简单的一种加密方式,加密(encryption)与解密(decryption)用的是同样的密钥(secret key). 对称加密有很多种算法,由于它效率很高,所 ...
- Python学习手册 :Python 学习笔记第一天
获取当前目录路径: import os os.getcwd() 在输入python程序时,尽量让不是嵌套结构的语句处于最左侧,要不然系统或许会出现"SyntaxError"错误 获 ...
- 自己动手实现网络服务器(Web Server)——基于C#
前言 最近在学习网络原理,突然萌发出自己实现一个网络服务器的想法,并且由于第三代小白机器人的开发需要,我把之前使用python.PHP写的那部分代码都迁移到了C#(别问我为什么这么喜欢C#),之前使用 ...
- 在SQL Server中实现关系模型的阶梯到级别3的t -SQL DML
在SQL Server中实现关系模型的阶梯到级别3的t -SQL DML 格雷戈里·拉森(Gregory Larsen),2017/08/02(第一次出版:2011 /11/09) 原文链接:http ...
- RT5350 OpenWrt 系统移植jsoncpp
下载Json包: 下载地址:http://sourceforge.net/projects/jsoncpp/ 如:jsoncpp-src-0.5.0.tar.gz 交叉编译: 1.解压jsoncpp- ...
- UVa 1608,Non-boring sequences
好诡异的一个题啊 紫书上关于从左边找还是从两边往中间找的讨论没有看懂,怎么一下就找到唯一的元素了(⊙_⊙?) 方法就是用的书上讲的方法,类似于uva 11572,不过这个题需要预处理存下两边的最近的相 ...