为了账号安全，请及时绑定邮箱和手机立即绑定
首页 免费课 用JS实现购物车特效 笔记

用JS实现购物车特效

阿安 JS工程师
查看讲师更多课程 阿安讲师的其他课程
难度初级
时长 1小时39分
学习人数
综合评分9.80
83人评价 查看评价
10.0 内容实用
9.7 简洁易懂
9.7 逻辑清晰
最热 最新
  • qiug 03:04

    .rows

    表格元素特有的属性，存放节点所有tr元素

    查看全部
    0 采集 收起 来源：解决IE兼容性问题

    2020-04-13

  • weixin_慕瓜6242559

    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
      table {
       border-collapse: collapse;
      }
      td {
       border: 1px solid #333333;
      }
     </style>
     <script type="text/javascript">

      window.onload = function () {
       // 获取元素
       var table = document.getElementById('table');
       var tr = table.getElementsByTagName('tr');
       var del = document.getElementById('del');
       //事件函数
       del.onclick = function(){
        for(var i = 0; i<tr.length; i++){
         var seItem = tr[i].getElementsByTagName('input')[0];
         if (seItem.checked){
          tr[i].parentNode.removeChild(tr[i]);
          i--;
         }
        }
       }
      }
     </script>
    </head>
    <body>
     <table id="table">
      <tr>
       <td><input type="checkbox"/></td>
       <td>1</td>
      </tr>
      <tr>
       <td><input type="checkbox"/></td>
       <td>2</td>
      </tr>
      <tr>
       <td><input type="checkbox"/></td>
       <td>3</td>
      </tr>
      <tr>
       <td><input type="checkbox"/></td>
       <td>4</td>
      </tr>
     </table>
     <button id='del'>删除</button>
    </script>
    </body>
    </html>


    查看全部
    0 采集 收起 来源：编程练习

    2019-09-28

  • weixin_慕瓜6242559

    <!DOCTYPE html>
    <html>
    <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <style type="text/css">
                                    input { width: 60px; }
                                    div { margin: 10px 0 }
                    </style>
    </head>
    <body>
                    <input id="num1" type="text"/>
                    <input id="num2" type="text"/>
                    <div>结果：<span id="ret"></span></div>
                    <button>+</button>
                    <button>-</button>
                    <button>*</button>
                    <button>/</button>

                    <script type="text/javascript">
                                    window.onload = function () {
                                                    // 获取元素
                                                   var num1 = document.getElementById('num1');
                                                    var num2 = document.getElementById('num2');
                                                    var ret = document.getElementById('ret');
                                                    var btns = document.getElementsByTagName('button');
                                                    var p = parseInt;

                                                    //为按钮添加点击事件，计算结果
                                                    for (var i=0; i<btns.length; i++){
                                                                    btns[i].onclick = function(){
                                                                                    switch(this.innerText){
                                                                                                    case  "+" :
                                                                                                                    ret.innerHTML =   p(num1.value) + p(num2.value);
                                                                                                                    break;
                                                                                                    case  "-"  :
                                                                                                                    ret.innerHTML =   p(num1.value) - p(num2.value);
                                                                                                                    break;
                                                                                                   case   "*" : 
                                                                                                                    ret.innerHTML =   p(num1.value) * p(num2.value);
                                                                                                                    break;
                                                                                                    case  "/"  :
                                                                                                                   var  result =  p(num1.value) / p(num2.value);
                                                                                                                   ret.innerHTML = result.toFixed(3);
                                                                                                                   break;
                                                                                    }
                                                                   }
                                                   }
                                     }
                    </script>
    </body>
    </html>


    查看全部
    1 采集 收起 来源：编程练习

    2019-09-28

  • weixin_慕瓜6242559

    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="UTF-8">
     <title></title>
     <style type="text/css">
      *{
       margin: 0;
       padding: 0;
       list-style: none;
      }
      body {
       padding: 20px;
      }

      li {
       float: left;
       margin: 20px;
      }
      #total {
       clear: both;
      }
     </style>

     <script type="text/javascript">
      window.onload = function () {
       // 获取元素
       var all = document.getElementById('all');
       var list = document.getElementById('list');
       var inputs = list.getElementsByTagName('input');
       var total = document.getElementById('total');

       // 计算已选项的总数
       function selSum() {
        var ret = 0;
        var len = inputs.length;
        for (var i = 0; i<len; i++){
         if (inputs[i].checked) {
          ret++;
          
         }
        }
        total.innerHTML = '已选：' + ret + ' 项';
       }

       // 全选事件
       all.onchange = function () {
        var len = inputs.length;
        for (var j = 0; j < len; j++){
         inputs[j].checked = all.checked;
        }
        selSum();
       }

       // 每个选项的事件
       for (var k = 0, len = inputs.length; k< len; k++) {
        inputs[k].onchange = function () {
         selSum();
         if (inputs[k].checked == false) {
          all.checked = false;
         }
        }
       }
      }
     </script>
    </head>
    <body>
    <div><label><input id="all" type="checkbox"/>全选</label></div>
    <ul id="list">
     <li><label><input type="checkbox"/>选项1</label></li>
     <li><label><input type="checkbox"/>选项2</label></li>
     <li><label><input type="checkbox"/>选项3</label></li>
     <li><label><input type="checkbox"/>选项4</label></li>
     <li><label><input type="checkbox"/>选项5</label></li>
     <li><label><input type="checkbox"/>选项6</label></li>
    </ul>
    <div id="total">已选：0 项</div>
    </body>
    </html>


    查看全部
    0 采集 收起 来源：编程练习

    2019-09-27

  • weixin_慕瓜6242559

    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="UTF-8">
     <title></title>
     <script type="text/javascript">
      window.onload = function () {
       // h获取元素
       var list = document.getElementById('list');
       var inputs = list.getElementsByTagName('input');
       var ok = document.getElementById('ok');
       var ret = document.getElementById('ret');

       // 添加按钮点击事件
       ok.onclick = function () {
        var i = 0, len = inputs.length, checked = 0;

        // 遍历所有的勾选框，计算出已选总数,存放在变量checked
        while(i < len) {
          if (inputs[i].checked){
           checked += 1;
          }
         i++;
        }
        //根据checked值更新结果
        if (checked >0){
         ret.style.display = "block";
         ret.innerHTML = "已选："+checked;
        }
        else{
         ret.style.display = "none";
         ret.innerHTML = "";
        }
       }
      }
     </script>
    </head>
    <body>
     <ul id="list">
      <li><label><input type="checkbox"/>1</label></li>
      <li><label><input type="checkbox"/>2</label></li>
      <li><label><input type="checkbox"/>3</label></li>
      <li><label><input type="checkbox"/>4</label></li>
      <li><label><input type="checkbox"/>5</label></li>
     </ul>
     <button id="ok">确定</button>
     <p id="ret" ></p>
    </body>
    </html>


    查看全部
    0 采集 收起 来源：编程练习

    2019-09-26

  • weixin_慕瓜6242559

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #btn {

                display: none;

            }

        </style>

        <script type="text/javascript">

            window.onload = function () {

                // 获取元素

                var inp = document.getElementById('inp');

                var btn = document.getElementById('btn');

                

                inp.onchange = function () {

                    var checked = this.checked;

                    // 根据checked 值来显示隐藏按钮

                    if(checked){

                        btn.style.display = 'block';

                    }

                }

            }

        </script>

    </head>

    <body>

    <div>

        <p>我是内容条款！</p>

        <p>我是内容条款！</p>

        <p>我是内容条款！</p>

        <p>我是内容条款！</p>

        <p>我是内容条款！</p>

        <p>我是内容条款！</p>

    </div>

    <label><input id="inp" type="checkbox"/> 同意条款</label>

    <p><button id="btn">下一步</button></p>

    </body>

    </html>


    查看全部
    0 采集 收起 来源：编程练习

    2019-09-26

  • weixin_慕瓜6242559

    <!DOCTYPE html>
    <html>
    <head>
     <meta charset="UTF-8">
     <title>表格</title>
     <style type="text/css">
            table {
                border-collapse: collapse;
                background-color: #CCC;
            }
            td {
                border: 1px solid black;
                width: 100px;
                text-align: center;;
            }
        </style>
    </head>

    <body>
    <!--table表格HTML-->
     <table>
      <tr>
       <td>html</td>
       <td>css</td>
       <td>JS</td>
      </tr>
      <tr>
       <td colspan="2">JQ</td>
       <!-- <td>java</td> -->
       <td>php</td>
      </tr>
      <tr>
       <td>Android</td>
       <td>Swift</td>
       <td>ios</td>
      </tr>
     </table>
    </body>
    </html>


    查看全部
    0 采集 收起 来源：编程练习

    2019-09-26

  • 小殇学生

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #btn {

                display: none;

            }

        </style>

        <script type="text/javascript">

            window.onload = function () {


                // 获取元素

                var inp = document.getElementById('inp');

                var btn = document.getElementById('btn');


                inp.onchange = function () {

                    var checked = this.checked;

               if(checked){

                     btn.style.display="block";

                }else{

                     btn.style.display="none";

                }

                }

            }

        </script>

    </head>

    <body>

    <div>

        <p>我是内容条款！</p>

        <p>我是内容条款！</p>

        <p>我是内容条款！</p>

        <p>我是内容条款！</p>

        <p>我是内容条款！</p>

        <p>我是内容条款！</p>

    </div>

    <label><input id="inp" type="checkbox"/> 同意条款</label>

    <p><button id="btn">下一步</button></p>

    </body>

    </html>


    查看全部
    0 采集 收起 来源：编程练习

    2019-07-12

  • 小殇学生

    rows:表格元素特有的属性，存放节点所有tr元素

    查看全部
    0 采集 收起 来源：解决IE兼容性问题

    2019-07-11

  • 慕仰0196443 06:30
    .rows 表格里面所有tr
    查看全部
    0 采集 收起 来源：解决IE兼容性问题

    2019-06-19

  • 空洞的灵魂

    //计算已选项的总数

    1. 说明一个变量ret，初始值为0；

    2. 遍历所有列表项，如果此项已选，ret加1；

    3. 把ret的最终值写入显示结果的元素的html里；（id名.inner HTML的意思是把class=id名里的代码内容更换。ps：innertext的意思是把内容里的文本内容更换。）

    function showToatal(){

    var ret=0,i=0;len=inputs.length;

    while(i<len){

    if(inputs[i].checked){

    ret++;}

    i++;}

    total.innerHTML='已选：'+ret+'项'

    }

    //全选事件

    all.onchange=function(){ //all.onchange说明全选框已被点击激活

    var i=0;len=inputs.length;

    while(i<len){

    inputs[i].checked=all.checked; //通过遍历把全选的激活状态赋值给每一个选项

    i++;}

    showToatal();//调用showToatal函数进行innerHTML代码更新。

    }

    //每个选项的事件

    1.遍历所有项，为每一项添加onchange触发事件，调用showToatal计算已选项个数。

    for(var i=0,len=inputs.length;i<len;i++){

    inputs[i].onchange=function(){

    showToatal();

    if(!this.checked){

    all.checked=false;

    }

    };

    }

    小结：第一步需要考虑的是通过遍历判断该项是否被触发，并计算已选项；因为后面每一步都要用到这个函数

    第二步：判断大范围的全选事件，也是在全选框被激活后通过遍历，把全选框的checked值赋给每一项，并调用函数showToatal进行计算已选项。

    第三步：考虑小范围的单选事件，通过遍历inputs[i].onchange触发，调用showToatal函数计算已选项，在判断是否全选！this.checked的意思是这个选项未选，this.checked的意思是这个选项已选。通过这个判断就可以使全选的值变为false。

    查看全部
    0 采集 收起 来源：编程练习

    2019-06-13

首页上一页1234567下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
您需要掌握HTML语法，CSS布局基础，基本的JavaScript语法知识。
老师告诉你能学到什么？
1. 实现兼容低版本IE的getElementsByClassName()方法 2. JS表格操作 3. 通过parseInt()，parseFloat()把字符串转换成数字 4. 通过toFixed()把数字格式化成指定位数的小数 5. 事件代理的运用

微信扫码，参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程