Day26
案例1:简易购物车
<!DOCTYPE html>
<html>
<head>
<title>mycart.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" language="javascript">
<!--
function buy(obj){
//遍历所有的checkbox,计算新的总价
var fruits=document.getElementsByName("fruit");
var totalPrice = 0;
for(var i=0;i<fruits.length;i++){
//判断是否选择
if(fruits[i].checked){
totalPrice+=parseFloat(fruits[i].value);
}
}
myspan.innerText=totalPrice+"";
}
//-->
</script>
</head>
<body>
<h1>我的购物车</h1>
<input type="checkbox" name="fruit" value="10" οnclick="buy(this)"/>苹果 10元 <br/>
<input type="checkbox" name="fruit" value="20" οnclick="buy(this)"/>香蕉 20元<br/>
<input type="checkbox" name="fruit" value="30" οnclick="buy(this)"/>西瓜 30元<br/>
<input type="checkbox" name="fruit" value="40" οnclick="buy(this)"/>梨子 40元<br/>
<input type="checkbox" name="fruit" value="50" οnclick="buy(this)"/>哈密瓜 50元<br/>
总价格是:<span id="myspan">0</span>元
</body>
</html>
案例2:全选与取消全选
<!DOCTYPE html>
<html>
<head>
<title>selectCheckBox.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
<!--
var fruits = document.getElementsByName("fruit");
function selectCheckBox(obj){
//window.alert(obj.innerText);
if(obj.innerText=="全选"){
for(var i=0;i<fruits.length;i++){
fruits[i].checked=true;
}
}else if(obj.innerText=="取消"){
for(var i=0;i<fruits.length;i++){
fruits[i].checked=false;
}
}
}
//响应复选框
function selectCheckBox2(){
if(myselect.checked){
for(var i=0;i<fruits.length;i++){
fruits[i].checked=true;
}
}else{
for(var i=0;i<fruits.length;i++){
fruits[i].checked=false;
}
}
}
//-->
</script>
</head>
<body>
<input type="checkbox" name="fruit" value="10" οnclick="buy(this)"/>苹果 10元 <br/>
<input type="checkbox" name="fruit" value="20" οnclick="buy(this)"/>香蕉 20元<br/>
<input type="checkbox" name="fruit" value="30" οnclick="buy(this)"/>西瓜 30元<br/>
<input type="checkbox" name="fruit" value="40" οnclick="buy(this)"/>梨子 40元<br/>
<input type="checkbox" name="fruit" value="50" οnclick="buy(this)"/>哈密瓜 50元<br/>
<a href="#" οnclick="selectCheckBox(this)">全选</a>
<a href="#" οnclick="selectCheckBox(this)">取消</a>
<input type="checkbox" id="myselect" οnclick="selectCheckBox2()"/>是否全选
</body>
</html>
-
forms对象(集合)定义:
按照表单在文档中的顺序得到form对象,forms对象集合中包括了当前文档的所有form对象。
讲forms对象(集合)的目的其实是为了讲解form对象。
-
length: 设置或得到集合的大小
-
forms[1]等价于forms.item(1)
当访问某个表单的某个元素的时候,可以使用上面两种方法。
案例3:form对象
<!DOCTYPE html>
<html>
<head>
<title>forms.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript">
<!--
function test(){
var allform = document.forms;//拿到所有的表单
//window.alert(allform.length);
//可以通过allform访问指定表单
window.alert(allform[1].hobby2.value);
window.alert(allform.item(1).hobby1.value);
}
//-->
</script>
</head>
<body>
<h1>个人信息</h1>
<form action="">
u:<input type="text" name="username"/><br>
p:<input type="password" name="pwd"/><br>
<input type="submit" value="提交"/>
</form>
<h1>兴趣爱好</h1>
<form action="">
爱好1:<input type="text" name="hobby1"/><br>
爱好2:<input type="text" name="hobby2"/><br>
<input type="submit" value="提交"/>
</form>
<input type="button" value="testing" οnclick="test()"/>
</body>
</html>
在验证表单的时候,可以在
<form action=”” οnsubmit=”函数”/>
也可以在
<input type=”submit” οnclick=”函数”/>
写一个就可以了,没有必要多写,否则验证两次,不划算!
-
images对象(集合)/img对象
imagesàimg对象
-
onload 图片在加载成功后调用
-
onerror图片在加载失败后调用
-
links对象(集合)定义:
links—>link对象,与前面类似
-
table对象
鉴于table对象在web编程中的重要性,这里重点强调table对象。
table对象代表一个html表格。
在HTML文档中<table>标签每出现一次,一个table对象就会被创建。
table对象的例子参照window对象3中的猜拳游戏!