传统写法获取随机数抽奖和promise写法获取随机数抽奖

最新推荐文章于 2024-07-24 11:09:48 发布

陈阳羽

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量141

点赞数

分类专栏：基础入门笔记文章标签： javascript html vue.js

本文链接：https://blog.csdn.net/weixin_45764245/article/details/120446548

版权

基础入门笔记专栏收录该内容

10 篇文章 0 订阅

订阅专栏

结题思路

获取随机数
创建点击事件
判断随机数值输出中奖结果

传统写法

<body>
    <h2>传统写法抽奖</h2>
    <button id="btn">点击抽奖</button>
    <script>
        //生成随机数值函数
        function rand(min, max) {
            return Math.round(Math.random() * (max - min) + min)
        }
        //获取元素节点
        const btn = document.getElementById('btn')
        //按钮元素点击事件
        btn.onclick = () => {
            var a = rand(1, 100);   
            if (a<=50) {
                console.log("中奖",a)
            } else {
                console.log("未中奖",a)
            }

        }

    </script>
</body>

promise写法

<body>
    <div>
        <h2>Promise写法写抽奖</h2>
        <button id="btn">点击抽奖</button>
    </div>
    <script>
        // 生成一个随机数函数
        function rand(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }
        // 获取元素节点
        const btn = document.getElementById('btn')
        // 按钮元素点击事件
        btn.onclick = function () {
                /* 
                创建一个promise对象
                    -promise对象中是一个函数
                        -函数中是异步条件
                */                
            const p = new Promise((re,rej) => {
                var a = rand(1, 100);
                if (a <= 50) {
                    re(a);
                } else {
                    rej(a);
                }
            })
            // 调用promise对象
            // .then对应promise对象函数中第一返回值
            // .catch对应promise对象函数中第二个返回值
            p.then((res) => { console.log(res,"中奖了") }).catch(rej => { console.log(rej,"未中奖")})

        }
    </script>
</body>

陈阳羽

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
传统写法获取随机数抽奖和promise写法获取随机数抽奖

结题思路获取随机数创建点击事件判断随机数值输出中奖结果传统写法<body> <h2>传统写法抽奖</h2> <button id="btn">点击抽奖</button> <script> //生成随机数值函数 function rand(min, max) { return Math.round(Math.random() * (max - m
复制链接

扫一扫