• Welcome to Journal web site.
首页 关于 博客 留言 联系
首页 关于 博客 留言 联系

我是 PHP 程序员

- 开发无止境 -

Next
没有了

第17章 0408-JS实战(一)

Data: 2017-07-12 16:14:37Form: JournalClick: 10

问题集合：

1.为什么有时候要括号有时候不要，onchange和autoCalculate？

image.png

答：没有括号的时候相当于匿名函数 window.onload=function（）{...autoCalcaulae() 的代码块内容}，有括号autoCalcaulae() ，代表执行这个函数。

2.这个框怎么加上的，视频教程没讲到？

答：

背景图就是那个颜色，中间加个gap轨道




demo1：双色球抽奖（按一定规则，取几个随机数）

<div class="box"></div>
    <script>
        // 红球: 1-33=>6,不重复,排序
        // 蓝球: 1-16=>1, 可以和红球重复

        // 思路:
        // 1. 先取红球, 放在一个中奖号数组中, 排序
        // 2. 然后把蓝球追加到中奖数组中
        // 3. 最后还要马中奖数组渲染到页面: dom

        // 临时数组: 放红球
        let arr = [];

        // 中奖数组,最后应该有7个数,6个红球,1个蓝球
        let res = [];

        // 1. 生成1-33个红球
        for (let i = 1; i <= 33; i++) {
            arr.push(i);
        }
        console.log(arr);

        // 2. 从33个红球中取出6个
        for (let i = 0; i < 6; i++) {
            // arr的下标取值范围: [0-32]
            // 问题: 如何生成0-32这样的整数索引,用它来获取数组中的数据
            // Math.random(): 0-1之间的随机小数

            // console.log(Math.random());
            // 0-33之间的小数,但永远不会到33这个数
            // 0.0123, 32.999999, 向下取整
            // 0.0123 => 0
            // 32.9999999 => 32
            // console.log(Math.random() * 33);
            // console.log(Math.random() * arr.length);
            // console.log(Math.floor(Math.random() * arr.length));
            // 索引是唯一的,为什么重复了
            // 索引不会重复,但是对应的值会重复
            // [1,2,3,2]
            // 0=>1,1=>2, 2=>3, 3=>2
            // 应该每取一个就从原始数组中删除一个
            let index = Math.floor(Math.random() * arr.length);
            // console.log(Math.ceil(1.000001));
            res.push(arr[index]);
            arr.splice(index, 1);
        }

        // 排序
        res.sort((a, b) => a - b);

        console.log(res);

        // 3. 生成一个蓝球, 并追加到中奖数组中
        // 必须是: 1-16之间,并包括 1, 16
        let blue = Math.floor(Math.random() * 16) + 1;
        console.log(blue);
        res.push(blue);
        console.log(res);

        // 4. 将中奖号码显示到页面中
        const box = document.querySelector('.box');
        res.forEach(item => {
            const ball = document.createElement('div');
            ball.textContent = item;
            box.append(ball);
        });
    </script>
    <style>
        .box {
            display: grid;
            grid-template-columns: repeat(auto-fill, 30px);
            grid-auto-rows: 30px;
            gap: 5px;
        }
       
        .box>div {
            border-radius: 50%;
            display: grid;
            place-items: center;
            background-color: red;
            color: white;
            box-shadow: 2px 2px 2px #666;
        }
       
        .box>div:last-of-type {
            background-color: blue;
        }
    </style>
demo2：tab选项卡（原生js控制tab切换）
<style>
        .box {
            width: 28em;
            display: grid;
            grid-template-columns: 3em 1fr;
        }
       
        .box ul {
            margin: 0;
            padding: 0;
        }
       
        .box li {
            list-style: none;
            /* height: 2em; */
        }
       
        .box li a {
            text-decoration: none;
        }
       
        .box li:hover {
            cursor: pointer;
        }
       
        .box .content {
            background-color: lightgreen;
            display: none;
            place-self: center start;
        }
       
        .box .content.active {
            display: block;
        }
       
        .box .menu li.active {
            background-color: lightgreen;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 1. 标签 -->
        <!-- 子元素上的点击事件会冒泡到父元素,利用这个特点,只需要给父元素添加点击事件就可以了 -->
        <ul class="menu" onclick="show()">
            <!-- 先给默认显示的标签和对应的内容添加 class="active"处于激活状态/可见 -->
            <!-- 使用自定义属性data-index使标签和与之对应的内容进行绑定 -->
            <li data-index="1" class="active">本省</li>
            <li data-index="2">全国</li>
            <li data-index="3">防疫</li>
        </ul>

        <!-- 2. 内容 -->
        <ul class="content active" data-index="1">
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
            <li><a href="">刚刚通报!2021安徽GDP预计破4万亿元!</a></li>
        </ul>

        <ul class="content" data-index="2">
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
            <li><a href="">总书记关心北京冬奥会,冬残奥会筹办纪实</a></li>
        </ul>

        <ul class="content" data-index="3">
            <li><a href="">坚持&ldquo;动态清零&rdquo;不动摇(人民论坛)</a></li>
            <li><a href="">坚持&ldquo;动态清零&rdquo;不动摇(人民论坛)</a></li>
            <li><a href="">坚持&ldquo;动态清零&rdquo;不动摇(人民论坛)</a></li>
            <li><a href="">坚持&ldquo;动态清零&rdquo;不动摇(人民论坛)</a></li>
            <li><a href="">坚持&ldquo;动态清零&rdquo;不动摇(人民论坛)</a></li>
        </ul>
    </div>

    <script>
        function show() {
            // 事件绑定者
            // console.log(event.currentTarget);
            // 事件主体
            // console.log(event.target);

            const ul = event.currentTarget;
            const li = event.target;

            // 1. 将原高亮的标签去掉active,并把当前的标签设置为active
            [...ul.children].forEach(li => li.classList.remove('active'));
            li.classList.add('active');

            // 2. 根据标签的data-index进行查询,获取与它对应的列表
            const content = document.querySelectorAll('.content');
            // document.querySelectorAll()返回的是NodeList对象,上面已定义了forEach,所以不用转真数组
            console.log(content);

            content.forEach(li => li.classList.remove('active'));

            console.log([...content].filter(ul => ul.dataset.index === li.dataset.index)[0]);
            //    filter(ul => ul.dataset.index === li.dataset.index)[0]
            //    用find进行简化, find就是获取filter结果数组中的第一个
            [...content].find(ul => ul.dataset.index === li.dataset.index).classList.add('active');
        }
    </script>
demo3：购物车（js全选反选，购物数量计算）
<style>
        .box {
            width: 22em;
            height: 2em;
        }
       
        .list>li {
            height: 1.6em;
            background-color: #efefef;
            display: grid;
            grid-template-columns: repeat(5, 3em);
            gap: 1em;
            place-items: center right;
            border-bottom: 1px solid #ccc;
        }
       
        .list>li:first-of-type {
            background-color: lightseagreen;
            color: white;
        }
       
        .list>li:hover:not(:first-of-type) {
            cursor: pointer;
            background-color: lightcyan;
        }
       
        .list>li input[type='number'] {
            width: 3em;
            border: none;
            outline: none;
            text-align: center;
            font-size: 1em;
            background-color: transparent;
        }
       
        .list>li:last-of-type span.total-num,
        .list>li:last-of-type span.total-amount {
            grid-column: span 2;
            place-self: center right;
            color: lightseagreen;
        }
       
        .account {
            float: right;
            background-color: lightseagreen;
            color: white;
            border: none;
            outline: none;
            width: 4.5em;
            height: 1.8em;
        }
       
        .account:hover {
            background-color: coral;
            cursor: pointer;
        }
<div class="box">
        <div class="selectAll">
            <!-- checkAll(): 当全选按钮的状态发生变化化,触发该事件 change  -->
            <input type="checkbox" class="check-all" name="check-all" onchange="checkAll()" checked />
            <label for="check-all">全选</label>
        </div>
        <ul class="list">
            <li><span>选择</span><span>品名</span><span>数量</span><span>单价</span><span>金额</span></li>
            <li>
                <input type="checkbox" onchange="checkItems()" checked />
                <span class="content">手机</span>
                <input type="number" value="1" min="1" class="num" />
                <span class="price">100</span>
                <span class="amount">0</span>
            </li>
            <li>
                <input type="checkbox" onchange="checkItems()" checked />
                <span class="content">电脑</span>
                <input type="number" value="2" min="1" class="num" />
                <span class="price">200</span><span class="amount">0</span>
            </li>
journal I'm Developers.
Copyright © 2014-2024 Guojunjie.com.
All screenshots © 郭俊杰(Journal).
I have been in Xiamen,China.
Website Establishment by Journal.
闽ICP备12018326号-2
Name:
<提交>