上机练习3
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>完善当当购物车页面</title>
<link type="text/css"rel="stylesheet"href="css/cartStyle.css"/>
<script>
var danjia=[21.90,24.00];//商品的单价
var shuliang=[1,1];//商品的数量
var xiaoji=[danjia[0]*shuliang[0],danjia[1]*shuliang[1]];//商品的小计
function add(index){
//拿到页面中存放商品数量的input标签
var obj=document.getElementsByName("amount")[index];
shuliang[index]++;//商品数量自增
obj.value=shuliang[index];//更新商品数量
//拼接小计li标签id
var el_Id='price'+index;
//拿到页面中存放商品小计的li标签
var obj1=document.getElementById(el_Id);
//更新小计
xiaoji[index]=danjia[index]*shuliang[index];
obj1.innerHTML='￥'+xiaoji[index];
//更新总计
document.getElementById("totalPrice").innerHTML="￥"+(xiaoji[0]+xiaoji[1]);
}
function jian(index){
//拿到页面中存放商品数量的input标签
var obj=document.getElementsByName("amount")[index];
shuliang[index]--;//商品数量自减
if(shuliang[index]<=0){
shuliang[index]=1;
}
obj.value=shuliang[index];//更新商品数量
//拼接小计li标签id
var el_Id='price'+index;
//拿到页面中存放商品小计的li标签
var obj1=document.getElementById(el_Id);
//更新小计
xiaoji[index]=danjia[index]*shuliang[index];
obj1.innerHTML='￥'+xiaoji[index];
//更新总计
document.getElementById("totalPrice").innerHTML="￥"+(xiaoji[0]+xiaoji[1]);
}
</script>
</head>
<body>
<div class="content">
<div class="logo">
<img src="images/dd_logo.jpg"><span>关闭</span>
</div>
<div class="cartList">
<ul>
<li>¥<input type="text"name="price"value="21.90"></li>
<li><input type="button"name="minus"value="-"onclick="jian(0)"><input type="text"name="amount"value="1"><input type="button"name="plus"value="+"onclick="add(0)"></li>
<li id="price0">¥21.90</li>
<li><p>移入收藏</p><p>删除</p></li>
</ul>
<ul>
<li>¥<input type="text"name="price"value="24.00"></li>
<li><input type="button"name="minus" value="-" onclick="jian(1)"><input type="text"name="amount"value="1"><input type="button"name="plus" value="+" onclick="add(1)"></li>
<li id="price1">¥24.00</li>
<li><p>移入收藏</p><p>删除</p></li>
</ul>
<ol>
<li id="totalPrice"> </li>
<li><span>结 算</span></li>
</ol>
</div>
</div>
</body>
</html>
动态时钟示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<script>
function cli(){
var dateNow=new Date();
var year=dateNow.getFullYear();
var month=dateNow.getMonth()+1;
var dateTemp=dateNow.getDate();
var hours=dateNow.getHours();
var minutes=dateNow.getMinutes();
var seconds=dateNow.getSeconds();
var dateStr=year+"/"+month+"/"+dateTemp+""+hours+":"+minutes+":"+seconds;
document.getElementsByTagName("h1")[0].innerHTML=dateStr;
}
function reflash(){
//延迟一秒后刷新动态时钟
setTimeout("cli()",1000);
}
var inte;
function interval(){
//启动更新动态时钟
inte=setInterval("cli()",1000);
}
function stopInterval(){
//停止更新动态时钟
clearInterval(inte);
}
</script>
</head>
<body onload="cli()">
<h1></h1>
<div><input type="button"value="手动更新动态时钟"onclick="reflash()"/></div>
<div>
<input type="button"value="启动"onclick="interval()"/>
<input type="button"value="停止"onclick="stopInterval()"/>
</div>
</body>
</html>