                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

代碼快照怎么發

<!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>

Michael_Chen

2015-09-01

源自：JavaScript進階篇 9-4

關注問題我要回答

784

操作

收起

1 回答

qq_千與千尋_6
2015-09-06

<!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>

<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>