                        课程
                    
                        /前端开发
                        
                            /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

关注问题我要回答

696

操作

收起

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>