<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form>
请选择你爱好:<br>
<input type="checkbox" name="hobby" id="hobby1"> 音乐
<input type="checkbox" name="hobby" id="hobby2"> 登山
<input type="checkbox" name="hobby" id="hobby3"> 游泳
<input type="checkbox" name="hobby" id="hobby4"> 阅读
<input type="checkbox" name="hobby" id="hobby5"> 打球
<input type="checkbox" name="hobby" id="hobby6"> 跑步 <br>
<input type="button" value = "全选" onclick = "checkall();">
<input type="button" value = "全不选" onclick = "clearall();">
<p>请输入您要选择爱好的序号，序号为1-6:</p>
<input id="wb" name="wb" type="text" >
<input name="ok" type="button" value="确定" onclick = "checkone();">
</form>
<script type="text/javascript">
function checkall(){
var hobby = document.getElementsByTagName("input");
for(var i=0;i<hobby.length;i++)
{
hobby[i].checked="checked";
}
}
function clearall(){
var hobby = document.getElementsByName("hobby");
for(var i=0;i<hobby.length;i++)
{
hobby[i].checked="";
}
// 任务2
}
function checkone(){
var j=document.getElementById("wb").value-1;
var hobby=document.getElementsByName("hobby");
clearall();
hobby[j].checked="checked";
// 任务3
}
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Busy - 电商</title>
<style>
*{margin: 0; padding: 0;}
ul{list-style: none;}
a{text-decoration: none;}
em,i{font-style: normal;}
input{border: none;background: none; outline: none;}
.shopping_item{
border: #ccc solid 1px;
width: 800px;
margin: 20px auto;
}
.shopping_tit {
height: 31px;
background-color: #e2e2e2;
border-top: solid 1px #F8F8F8;
color: #444444;
font: 16px/31px "Microsoft YaHei", "微软雅黑";
text-indent: 12px;
border-bottom: #E3E3E3 solid 1px;
}
.shopping_cont{
padding: 15px 30px;
【任务1】
}
.cart_rmb{
margin-bottom: 20px;
}
.cart_rmb span {
font: bold 24px/1 Verdana;
color: red;
}
.cart_btn{
width: 165px;
height: 33px;
background-color: #E50007;
font: 18px/33px "Microsoft YaHei", "微软雅黑";
color: #FFF;
cursor:pointer;
}
.shoppingImg{
width:20px;
height:20px;
margin:-30px 0px 0px 75px;
position:absolute;
background-color: #E50007;
display:none;
}
.shopping_cart{
width:80px;
text-align:center;
line-height:30px;
background-color: #F07630;
color:#fff;
float:right;
}
.shopping_num{
border-radius:50%;
background-color: #E50007;
width:20px;
line-height:20px;
position:absolute;
margin:-37px 0 0 65px;
}
</style>
</head>
<body>
<div class="shopping_item">
<h3 class="shopping_tit">订单结算</h3>
<div class="shopping_cont">
<div class="cart_rmb">
<i>总计：</i><span>￥12306.00</span>
</div>
<div class="cart_btnBox">
<input type="button" class="cart_btn" value="提交订单">
<div class="shoppingImg"></div>
</div>
<div class="shopping_cart">购物车<div class="shopping_num">1</div></div>
<br style="clean:both"/>
</div>
</div>
</body>
<!--导入js包-->
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function(){
$(".cart_btn").click(function(){
$(this).css("background-color","#ccc");
$(".shoppingImg").animate({"margin":"8px 0px 0px 680px"},1000,function(){
$(".shoppingImg").hide();
$(".shopping_num").text("2");
}).show();
})
})
</script>
</html>