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树:由文档及文档中的所以元素(标签 ...
随机推荐
- JSP入门2
1. CRUD是Create(创建).Read(读取).Update(更新)和Delete(删除)的缩写,一般应用有这四项也就足够了. 我们这里的例子是对联系人信息进行CRUD操作. 2. javab ...
- Linux入门之常用命令（6）Bash命令重定向 管线命令
命令重定向 将目前所得数据转移到其他地方 > 将输出结果导入文件 如 ls -l / >test (1)若test文件不存在则创建 (2)若test文件存在 清空后写入 > ...
- poj3468（一维）（区间查询，区间修改）
A Simple Problem with Integers You have N integers, A1, A2, ... , AN. You need to deal with two kind ...
- 读书笔记之宿舍共享wifi
若有某方面侵权,请邮件1047697114@qq.com,一个工作日即可处理,谢谢 目录一.简单安装虚拟机二.简单设置,开热点! 我没试过那些wifi软件之类的,以下是个人测试的过程 一.简单安装 ...
- Gate One——用web展示Terminal（安装）
Gate One可以用web来展示Terminal,虽然存在一些小缺陷,基本功能都还可以的,有兴趣的可以折腾一下. 安装环境: 系统:RHEL 6.1 ,系统自带python 2.6.6 下载需要安装 ...
- 英特尔：不再公布PC处理器多核睿频数据
据了解,以往英特尔官方有三个频率数据:基础主频:Turbo 2.0(多核)频率:以及Turbo 3.0(单核)频率.现在被隐匿的则是Turbo 2.0(多核)频率. 对此,英特尔在回应媒体时表示,给出 ...
- ch3-模板语法({{}} v-html v-bind:id 表达式 指令 修饰符 过滤器)
1 模板语法 Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据. 所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器 ...
- cocos2dx - tmx地图分层移动处理
接上一节内容:cocos2dx - 节点管理 瓦片地图(Tiled Map) 在cocos2dx文档中有简单的介绍及使用.详情可以看:http://www.cocos2d-x.org/docs/man ...
- TableView的性能优化
现在市场上的iOS应用程序界面中使用最多的UI控件是什么? 答案肯定是UITableView,几乎每一款App都有很多的界面是由UITableView实现的,所以为了做出一款优秀的App,让用户有更好 ...
- Django实现用户密码重置
使用Django内置的认证视图实现简单的通过邮箱重置密码的功能版本:django 1.11 在django.contrib.auth.views中提供了四个类视图用于密码重置 class Passwo ...