js练习小demo

姜羅

已于 2023-04-17 17:32:10 修改

阅读量624

点赞数

文章标签： javascript 前端

于 2023-02-08 13:21:13 首次发布

本文链接：https://blog.csdn.net/weixin_60634477/article/details/128933691

版权

本文提供了一系列JavaScript编程练习，包括判断闰年、寻找水仙花数、打印九九乘法表、计算棋盘芝麻总重、数组去重等16个示例，涵盖基础操作和常见功能实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、键盘输入一个年份，判断是闰年还是平年

    var year = prompt("请输入年份：")
    if (year % 400 == 0 || year % 4 == 0 && year % 100 != 0) {
         console.log(year + "是闰年");
    } else {
        console.log(year + "是平年");
    }

2、打印100-999之间的水仙花数（例：153=1³ +5³+3³）

    var num = 100;
    while (num < 1000) {
        var g = num % 10;
        var s = parseInt(num % 100 / 10);
        var b = parseInt(num / 100);
        // console.log(g, s, b);
        var ifNum = (g * g * g) + (s * s * s) + (b * b * b);
        if (ifNum == num) {
            console.log(num);
        }
        num++;
    }

3、打印九九乘法表

    for (var i = 1; i <= 9; i++) {
        for (var j = 1; j <= i; j++) {
            document.write(j + "X" + i + "=" + i * j + "&nbsp;")
        }
        document.write("<br>")
    }

4、 64格棋盘，第一格放一粒芝麻，重0.00001KG，第二格放两粒芝麻，第三格放4个芝麻，求棋盘上芝麻总重

    var num = 1;
    for (var i = 0; i < 64; i++) {
        num += 2 ** i
    }
    console.log(num * 0.00001);

5、定义函数，实现n! +…+9!+8!+7!+6!+5!+4!+3!+2!+1的和

      function getJcSum(n) {
        var sum = 0;
        for (var i = 1; i <= n; i++) {
            var num = 1;
            for (var j = 1; j <= i; j++) {
                num *= j;
            }
            sum += num;
        }
        console.log(sum);
    }
    getJcSum(10);

6、数组去重

    var arr = [46, 46, 36, 78, 87, 78, 87, 36, 66, 66];
    //方法一：利用对象键的唯一性
    function doWeight_01(arr) {
        var obj = {};
        var newArr = [];
        arr.forEach(function(item) {
            obj[item] = item;
        })

        for (var key in obj) {
            newArr.push(obj[key]);
        }
        return newArr;
    }
    // console.log(doWeight_01(arr));

    //方法二：空数组
    function doWeight_02(arr) {
        var newArr = [];
        arr.forEach(function(item) {
            if (newArr.indexOf(item) == -1) {
                newArr.push(item);
            }
        })
        return newArr;
    }
    // console.log(doWeight_02(arr));

    //方法三：利用set集合的自去重
    function doWeight_03(arr) {
        var newArr = new Set(arr);
        return Array.from(newArr);
    }

    // console.log(doWeight_03(arr));

    //方法四：数组塌陷
    function doWeight_04(arr) {
        var newArr = arr;
        for (var i = 0; i < newArr.length; i++) {
            var index = newArr.indexOf(newArr[i], i + 1);
            if (index != -1) {
                newArr.splice(index, 1);
                i--;
            }
        }
        return newArr;
    }
    // console.log(doWeight_04(arr));

    //方法五：排序相邻去除
    function doWeight_05(arr) {
        var newArr = arr;
        newArr.sort(function(a, b) {
            return a - b;
        })
        for (var i = 0; i < newArr.length; i++) {
            var index = newArr.indexOf(newArr[i], i + 1);
            if (index != -1) {
                newArr.splice(index, 1);
                i--;
            }
        }

        return newArr;
    }
    console.log(doWeight_05(arr));

7、拆分字符串

/* var str = 'username=张三&age=18&email=12345678@qq.com'
    将以上字符串进行拆分，将拆分出的数据用对象的形式进行存储
    最终结果是: {username: '张三", age: '18', email: "12345678@qq.com'}*/
     function strSplit(str) {
        var user = {}
        var arr = str.split('&')

        arr.forEach(function(item) {
            user[item.split('=')[0]] = item.split('=')[1]
        })
        return user
    }

    var str = 'username=张三&age=18&email=12345678@qq.com'
    console.log(strSplit(str));

8、敏感词过滤

    function strFilter(str) {
        while (str.indexOf('傻子') != -1) {
            str = str.replace('傻子', '*')
        }
        return str
    }
    var str = '你是一个傻子是一个傻子是一个傻子是一个傻子是一个傻子'
    console.log(str);
    console.log(strFilter(str));

10、排他思想案例

10.1、html代码

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        main {
            width: 500px;
            margin: auto;
            background: orange;
        }
        
        main ul {
            width: 100%;
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        
        main ul li {
            width: 100px;
            list-style: none;
            float: left;
            cursor: pointer;
        }
        
        main ul li.current {
            background: red;
        }
    </style>
</head>

<body>
    <main>
        <ul>
            <li class="current">选项1</li>
            <li>选项2</li>
            <li>选项3</li>
            <li>选项4</li>
            <li>选项5</li>
        </ul>
    </main>
</body>

10.2、js代码

//封装一个简易的获取元素函数
function $(element) {
    if (document.querySelectorAll(element).length > 1) {
        return document.querySelectorAll(element);
    }
    return document.querySelector(element);
}

   $('li').forEach(function(item) {
        item.onclick = function() {
            //先清除所有元素的类名
            $('li').forEach(function(ite) {
                ite.classList.remove('current');
            })

            //再给当前元素添加类名
            this.classList.add('current');
        }
    })

11、瀑布流

11.1、html代码

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        footer,
        header {
            height: 100px;
            width: 100%;
            background: pink;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            color: #fff;
            font-weight: 700;
            position: relative;
        }
        
        main {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            position: relative;
        }
        
        main section {
            width: 23%;
            padding: 3px;
            margin-top: 10px;
            border: 5px solid #000;
        }
        
        main section img {
            width: 100%;
        }
        
        div.loading {
            display: none;
            text-align: center;
        }
    </style>
</head>

<body>
    <header>header</header>
    <main></main>
    <div class="loading">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01e1f35ad46d23a8012040293d688a.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663139598&t=fc70b8c2e4954ae6abe7e0db7657b7ff
        " alt="">
    </div>
    <footer>footer</footer>
</body>
<script src="data_list.js"></script>

11.2、数据js

var list = [
    { "id": 625153951363, "name": "2020西太湖国际音乐节", "showTime": "2020.09.19-09.20", "price": "199-399", "city": "常州", "address": "常州西太湖中国花卉博览景区北门", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01zJEpaN2GdSG1Xvo8y_!!2251059038.jpg" }, { "id": 624506842658, "name": "2020舟山东海音乐节", "showTime": "2020.09.04-09.06", "price": "200-680", "city": "舟山", "address": "舟山市朱家尖南沙景区沙滩", "pic": "https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01L70FVl2GdSG2wpwyE_!!0-item_pic.jpg" }, { "id": 623216520608, "name": "中国•磐安 2020氧气山水音乐节", "showTime": "2020.08.22 周六 16:30", "price": "280", "city": "金华", "address": "金华磐安花溪风景区", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ECp69h2GdSFpoUPAm_!!2251059038.jpg" }, { "id": 624345993344, "name": "2020“一生中最爱”七夕演唱会", "showTime": "2020.08.25 周二 19:30", "price": "180-580", "city": "北京", "address": "糖果TANGO-雍和宫店三层", "pic": "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01WGNYBE2GdSFqXJgII_!!0-item_pic.jpg" }, { "id": 624170605605, "name": "东海五渔节之敢潮音乐节", "showTime": "2020.08.22 周六 18:00", "price": "198-228", "city": "舟山", "address": "舟山嵊泗五龙乡听海广场(原黄沙村船厂)", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01eV5pR32GdSFxJUb0v_!!2251059038.jpg" }, { "id": 624000957041, "name": "【聚光灯】周四周日爆笑脱口秀剧场", "showTime": "2020.08.13-09.27", "price": "99", "city": "上海", "address": "健力士醇黑坊", "pic": "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01s9Jlz32GdSFv79hIO_!!0-item_pic.jpg" }, { "id": 623838540974, "name": "2020真世界摇滚演出", "showTime": "2020.08.29 周六 20:30", "price": "120", "city": "北京", "address": "糖果TANGO-雍和宫店三层", "pic": "https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01HWbQXk2GdSFxARpRD_!!0-item_pic.jpg" }, { "id": 624699066028, "name": "开心麻花首部悬疑惊悚喜剧《醉后赢家》", "showTime": "2020.08.25-09.06", "price": "80-1080", "city": "北京", "address": "地质礼堂剧场", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01Vv1mQO2GdSFvnmIDs_!!2251059038.png" }, { "id": 625219995330, "name": "开心麻花经典爆笑舞台剧《乌龙山伯爵》", "showTime": "2020.08.25-08.30", "price": "80-1080", "city": "北京", "address": "北京展览馆剧场", "pic": "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01znXuKj2GdSG6ACMMb_!!0-item_pic.jpg" }, { "id": 623454281510, "name": "开心麻花重磅新戏《贼想得到你》", "showTime": "2020.08.12 周三", "price": "80-1280", "city": "上海", "address": "上汽上海文化广场", "pic": "https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN013YAyeY2GdSFnXwgnQ_!!0-item_pic.jpg" }, { "id": 625314963280, "name": "开心麻花重磅新戏《贼想得到你》", "showTime": "2020.08.15-08.21", "price": "100-1180", "city": "上海", "address": "虹桥艺术中心", "pic": "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01Qb8wyX2GdSG30DCl4_!!0-item_pic.jpg" }, { "id": 622815888793, "name": "开心麻花上海首部原创爆笑舞台剧《皇帝的新娘》", "showTime": "2020.08.12-08.16", "price": "80-1180", "city": "上海", "address": "上戏实验剧院", "pic": "https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01uie4Gf2GdSFlp1Rvv_!!0-item_pic.jpg" }, { "id": 624443634831, "name": "孟京辉戏剧作品《我爱xxx》", "showTime": "2020.08.13-08.16", "price": "100-380", "city": "北京", "address": "蜂巢剧场", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01LwdJRL2GdSFtDPtRL_!!2251059038.jpg" }, { "id": 624095704875, "name": "【8月8日-16日场次周年特惠低至四折】太阳马戏X绮幻之境 - 8月", "showTime": "2020.08.12-08.30", "price": "360-3460", "city": "杭州", "address": "杭州新天地太阳剧场", "pic": "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01iyWOwU2GdSG2iMBsM_!!0-item_pic.jpg" }, { "id": 624163106935, "name": "高达5公里定向挑战赛", "showTime": "2020.09.26 周六", "price": "108-388", "city": "上海", "address": "世纪公园", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01y2n1PI2GdSFtLmEtu_!!2251059038.jpg" }, { "id": 622064265074, "name": "2020 FORMULA1 中国大奖赛（礼包&福袋）", "showTime": "2020.07.04-12.31", "price": "120-270", "city": "上海", "address": "上汽国际赛车场(上海国际赛车场)", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01ZHrnGM2GdSFbZjdUV_!!2251059038.jpg" }, { "id": 623662985515, "name": "2020ChinaJoy电竞赛事荟萃", "showTime": "2020.07.31-10.30", "price": "0", "city": "北京", "address": "请到大麦APP和优酷APP观看", "pic": "https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN01RpgBQ82GdSFoMD7h8_!!0-item_pic.jpg" }, { "id": 618307700815, "name": "2020 FORMULA1 中国大奖赛（服装）", "showTime": "2020.05.19-12.31", "price": "248-620", "city": "上海", "address": "上汽国际赛车场(上海国际赛车场)", "pic": "https://img.alicdn.com/bao/uploaded/i2/2251059038/O1CN01scI6Ly2GdSFEYDh7P_!!0-item_pic.jpg" }, { "id": 613334933912, "name": "2020 FORMULA1 中国大奖赛（周边衍生品）", "showTime": "2020.03.11-12.31", "price": "35-160", "city": "上海", "address": "上汽国际赛车场(上海国际赛车场)", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01ZusbUY2GdSENL0iIN_!!2251059038.jpg" }, { "id": 613323173822, "name": "2020 FORMULA1 中国大奖赛（帽品）", "showTime": "2020.03.11-12.31", "price": "200-335", "city": "上海", "address": "上汽国际赛车场(上海国际赛车场)", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i3/2251059038/O1CN01azreXu2GdSF9rIkGV_!!2251059038.jpg" }, { "id": 613940057617, "name": "加速北京跳伞俱乐部高空跳伞体验", "showTime": "2020.08.05-08.31", "price": "2980", "city": "北京", "address": "北京市平谷区马坊镇通航产业基地", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i1/2251059038/O1CN01Ns9MZj2GdSFIp2udB_!!2251059038.png" }, { "id": 624453755826, "name": "《你是演奏家2 · 超级金贝鼓》", "showTime": "2020.08.21-08.23", "price": "180-380", "city": "上海", "address": "美琪大戏院", "pic": "https://img.alicdn.com/bao/uploaded/i4/2251059038/O1CN016u70M62GdSFrTL5GP_!!0-item_pic.jpg" }, { "id": 624211844323, "name": "正版授权·大型儿童实景舞台剧《奥特曼宇宙之光》", "showTime": "2020.09.05 周六", "price": "180-580", "city": "海口", "address": "海南省歌舞剧院", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i2/2251059038/O1CN01ybwkiZ2GdSFy9894v_!!2251059038.jpg" }, { "id": 624672730925, "name": "全国正版授权大型互动式儿童舞台剧 海底小纵队2—火山大冒险", "showTime": "2020.11.15 周日", "price": "80-480", "city": "上海", "address": "黄浦剧场-中剧场", "pic": "https://img.alicdn.com/bao/uploaded/i1/2251059038/O1CN01mfDv5t2GdSFwbhzvt_!!0-item_pic.jpg" }, { "id": 624868314578, "name": "大船文化·加拿大原版音乐启蒙全场互动亲子剧《你是演奏家2·超级金贝鼓》", "showTime": "2020.09.06 周日", "price": "180-380", "city": "天津", "address": "津湾大剧院大剧场", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01l16ZUE2GdSFzGWSPx_!!2251059038.png" }, { "id": 624450522367, "name": "大船文化·法国艺术启蒙魔术剧《美术馆奇妙夜·星夜》中文版", "showTime": "2020.09.06 周日", "price": "120-280", "city": "南京", "address": "江苏大剧院--综艺厅", "pic": "https://img.alicdn.com/bao/uploaded/i3/2251059038/O1CN01FMizHi2GdSG0AINxP_!!2-item_pic.png" }, { "id": 623125350409, "name": "大船文化 法国艺术启蒙魔术剧《美术馆奇妙夜·星夜》中文版", "showTime": "2020.08.27-08.30", "price": "80-480", "city": "上海", "address": "上汽上海文化广场", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01CiAVft2GdSFpIawAw_!!2251059038.jpg" }, { "id": 623975390263, "name": "正版授权大型实景舞台剧《奥特曼：宇宙之光》（杭州站）", "showTime": "2020.12.13 周日", "price": "68-480", "city": "杭州", "address": "杭州剧院", "pic": "https://img.alicdn.com/bao/uploaded/https://img.alicdn.com/imgextra/i4/2251059038/O1CN01fUBSCY2GdSFsbnPPh_!!2251059038.jpg" }
]

11.3、js内容

 var main = document.querySelector('main')
    var loading = document.querySelector('.loading')

    var item = 8
    var pages = 1
    var total = list.length / item

    function printItem() {
        var startIndex = (pages - 1) * item
        var endIndex = pages * item
        var newList = list.slice(startIndex, endIndex)
        var str = ''
        newList.forEach(function(item) {
            str += ` <section>
            <img src="${item.pic}" alt="${item.id}">
            <p>名称：${item.name}</p>
            <p>城市：${item.city}</p>
            <p>地址：${item.address}</p>
            <p>时间：${item.showTime}</p>
            <p>价格：${item.price}元</p>
        </section>`
        })
        main.innerHTML += str
    }
    printItem()
    var flag = true
    window.onscroll = function() {
        if (pages >= total) return

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop //页面卷去高度
        var windowHeight = document.documentElement.clientHeight //可视窗口高度
        var mainHeight = main.clientHeight //main的高度
        var mainTop = main.offsetTop //main距离上方的偏移量

        if (scrollTop + windowHeight > mainHeight + mainTop) {
            if (flag === false) return
            flag = false
            loading.style.display = 'block'
            var timer = setTimeout(function() {
                pages++
                printItem()
                flag = true
                loading.style.display = 'none'
            }, 3000)
        }
    }

12、全选

12.1、html内容

  <input type="checkbox" id="all"><label for="all">全选</label>
    <hr>
    <input type="checkbox" name="item" id="item1"><label for="item1">选项一</label><br>
    <input type="checkbox" name="item" id="item2"><label for="item2">选项二</label><br>
    <input type="checkbox" name="item" id="item3"><label for="item3">选项三</label><br>
    <input type="checkbox" name="item" id="item4"><label for="item4">选项四</label>

12.2、js内容

//封装一个简易的获取元素函数
 function $(element) {
    if (document.querySelectorAll(element).length > 1) {
        return document.querySelectorAll(element);
    }
    return document.querySelector(element);
}

 //全选
    $('#all').onclick = function() {
        for (var i = 0; i < $('[name="item"]').length; i++) {
            $('[name="item"]')[i].checked = this.checked;
        }
    }

    //全部选中，全选选中
    $('[name="item"]').forEach(function(item) {
        item.onclick = function() {
            var flag = Array.from($('[name="item"]')).every(function(ite) {
                return ite.checked;
            })
            $('#all').checked = flag;
        }
    })

13、评价五角星

在这里插入图片描述

 var divs = []
    var grade = ['差', '一般', '良好', '好', '非常好']
    var span
    for (var i = 0; i < 5; i++) {
        //创建div
        var div = document.createElement('div')

        //自定义属性
        div.dataset.index = i
        div.style.width = '27px'
        div.style.height = '28px'
        div.style.background = 'url(img/star.gif) no-repeat top' //图片在上面
        div.style.float = 'left'
        document.body.appendChild(div)
        divs.push(div)
        div.addEventListener('click', click)

        //创建span
        span = document.createElement('span')
        document.body.appendChild(span)
    }

    function click() {
        //清除所有
        divs.forEach(function(item) {
            item.style.background = 'url(img/star.gif) no-repeat top'
        })

        //几个变黄
        for (var i = 0; i <= this.dataset.index; i++) {
            divs[i].style.background = 'url(img/star.gif) no-repeat bottom'
        }

        //改字
        span.innerText = grade[this.dataset.index]
    }

14、封装一个随机rgb颜色的函数

    function getColor() {
        var r = parseInt(Math.random() * 256);
        var g = parseInt(Math.random() * 256);
        var b = parseInt(Math.random() * 256);

        return `rgb(${r},${g},${b})`;
    }

15、倒计时函数

  //倒计时 返回一个剩余天、时、分、秒的数组
    function daojishi(startTime, endTime) {
        //将剩余天、时、分、秒放入数组中
        var syTime = (endTime - startTime) / 1000;
        //倒计时为零则结束
        if (syTime <= 0) {
            return 0;
        }
        var syDay = parseInt(syTime / 60 / 60 / 24);
        var syHour = parseInt(syTime / 60 / 60 % 24);
        var syMinutes = parseInt(syTime / 60 % 60);
        var sySeconds = parseInt(syTime % 60);

        return [add0(syDay), add0(syHour), add0(syMinutes), add0(sySeconds)];
    }

    //补零
    function add0(num) {
        return num < 10 ? '0' + num : num;
    }

16、简易购物车

16.1、html内容

<style>
        table {
            border-collapse: collapse;
        }
        
        table td input {
            width: 30px;
        }
    </style>
</head>

<body>
    <table border="1">
        <thead>
            <tr>
                <th>商品名称</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr>
                <td colspan="5">总计：<span>0</span></td>
            </tr>
        </tfoot>
    </table>
</body>

16.2、 js内容

function $(element) {
    if (document.querySelectorAll(element).length > 1) {
        return document.querySelectorAll(element);
    }
    return document.querySelector(element);
}

 var list = [{
        "name": "Apple",
        "price": 5000,
    }, {
        "name": "华为",
        "price": 4000,
    }, {
        "name": "小米",
        "price": 4900,
    }, {
        "name": "OPPO",
        "price": 4567,
    }]

    //数据渲染
    var str = '';
    list.forEach(function(item) {
        str += `<tr>
                <td>${item.name}</td>
                <td>${item.price}</td>
                <td><button class="minus_num">-</button><input type="text" min="1" value="1"><button class="add_num">+</button></td>
                <td class="totalPrice">${item.price}</td>
                <td><button class="remove">删除</button></td>
            </tr>`
    })
    $('tbody').innerHTML = str;


    var num; //个数
    var danJia; //单价
    //加号
    $('.add_num').forEach(function(item) {
        item.onclick = function() {
            danJia = this.parentNode.previousElementSibling.innerHTML; //单价
            num = this.previousElementSibling.value; //个数
            this.previousElementSibling.value = ++num; //点击加号数量加1
            this.parentNode.nextElementSibling.innerHTML = num * danJia //点击加号小计为单价乘以数量
            totalPrice();
        }
    })

    //减号
    $('.minus_num').forEach(function(item) {
        item.onclick = function() {
            danJia = this.parentNode.previousElementSibling.innerHTML; //单价
            num = this.nextElementSibling.value; //个数
            this.nextElementSibling.value = num > 1 ? --num : num;
            this.parentNode.nextElementSibling.innerHTML = num * danJia;
            totalPrice();
        }
    })

    //删除
    $('.remove').forEach(function(item) {
        item.onclick = function() {
            var youIf = confirm('确认是否删除');
            if (youIf) {
                this.parentNode.parentNode.remove();
                totalPrice();
            }
        }
    })

    //失去焦点
    $('input').forEach(function(item) {
        item.onblur = function() {
            danJia = this.parentNode.previousElementSibling.innerHTML; //单价
            num = this.value; //个数
            this.parentNode.nextElementSibling.innerHTML = num * danJia;
            totalPrice();
        }
    })


    //总计
    function totalPrice() {
        var sum = 0;
        var all = document.querySelectorAll('.totalPrice');
        all.forEach(function(item) {
            sum += item.innerHTML - 0;
        })
        $('span').innerHTML = sum;
    }
    totalPrice();