HTML5简易版随机点名

最新推荐文章于 2025-02-26 22:14:06 发布

为啥吃不饱呐

最新推荐文章于 2025-02-26 22:14:06 发布

阅读量626

点赞数

文章标签： javascript 前端 css

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/weixin_47362311/article/details/131790764

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h2 {
            text-align: center;
        }

        .box {
            width: 600px;
            margin: 50px auto;
            display: flex;
            font-size: 25px;
            line-height: 40px;
        }

        .qs {

            width: 450px;
            height: 40px;
            color: red;

        }

        .btns {
            text-align: center;
        }

        .btns button {
            width: 120px;
            height: 35px;
            margin: 0 50px;
        }
    </style>
</head>

<body>
    <h2>随机点名</h2>
    <div class="box">
        <span>名字是：</span>
        <div class="qs">这里显示姓名</div>
    </div>
    <div class="btns">
        <button class="start">开始</button>
        <button class="end">结束</button>
    </div>

    <script>
        // 数据数组
        const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']
        //开始按钮
        let startButton = 0
        const qs = document.querySelector('.qs')
        const start = document.querySelector('.start')
        start.addEventListener('click',function(){
            startButton = setInterval(function(){
                const random = parseInt(Math.random()*arr.length)
            qs.innerHTML = arr[random]
            },350)
            })
        //结束按钮
        const end = document.querySelector('.end')
        end.addEventListener('click',function(){
            clearInterval(startButton)
        })
    </script>
</body>

</html>

为啥吃不饱呐

博客等级

码龄5年

6
原创

0
点赞

2
收藏

1
粉丝

关注

私信

热门文章

最新评论

Javascript进阶
CSDN-Ada助手: 恭喜您写了第6篇博客！看到标题“Javascript进阶”，我很期待地点击了进来。您的博客内容总能给读者带来新的收获和思考，让我们在Javascript领域不断进步。在下一步的创作中，或许可以考虑分享一些常见的进阶技巧或者深入探讨一些高级概念，这样能够帮助我们更好地理解和应用Javascript。再次感谢您的分享，期待您的下一篇博客！
Javascript基础知识点
CSDN-Ada助手: 恭喜您开始博客创作！标题为“Javascript基础知识点”真是一个很好的主题选择。通过分享基础知识点，您可以帮助初学者打下坚实的基础，并为更高级的学习和应用打下基础。接下来，我建议您可以逐步深入探讨这些基础知识点，结合实际案例进行讲解，以帮助读者更好地理解和应用。同时，您也可以考虑扩展主题，例如介绍一些常见的编程错误和解决方法，或者深入探讨一些高级的概念和技巧。期待看到您更多精彩的博客文章！推荐【每天值得看】：https://bbs.csdn.net/forums/csdnnews?typeId=21804&utm_source=csdn_ai_ada_blog_reply1
刷新浏览器，图片自动切换-前端
CSDN-Ada助手: 这篇博客非常棒！你以简洁明了的方式介绍了如何通过前端代码实现浏览器刷新时图片自动切换的功能。这不仅提供了一个有趣的用户体验，还展示了你在前端开发方面的技能。继续写博客吧，你的内容对读者来说非常有价值！除了刷新浏览器自动切换图片的功能，你可能还可以探索一些与之相关的内容。例如，可以尝试使用CSS动画来实现更平滑的过渡效果，或者通过JavaScript的定时器来控制图片的显示时间。此外，你还可以研究一下响应式设计，以确保图片在不同设备上都能正常显示和切换。不过，作为一个前端开发者，我们要保持谦虚的态度，不断学习和提升自己的技能。希望你能继续分享你的经验和知识，为读者带来更多有趣且实用的前端技术。加油！如何写出更高质量的博客，请看该博主的分享：https://blog.csdn.net/lmy_520/article/details/128686434?utm_source=csdn_ai_ada_blog_reply2
简易版JS倒计时用户协议
CSDN-Ada助手: 恭喜你撰写了第三篇博客！标题“简易版JS倒计时用户协议”听起来非常有趣。我非常期待阅读你的博客，了解你是如何实现这个倒计时用户协议的。在下一篇博客中，或许你可以尝试分享一些关于如何优化这个简易版JS倒计时用户协议的经验，或者探讨一些与倒计时相关的其他有趣的主题。感谢你的辛勤努力，期待看到更多精彩的博客！ CSDN 正在通过评论红包奖励优秀博客，请看红包流：https://bbs.csdn.net/?type=4&header=0&utm_source=csdn_ai_ada_blog_reply3
HTML5简易版随机点名
CSDN-Ada助手: 恭喜您写了第四篇博客！标题“HTML5简易版随机点名”非常吸引人。您的创作能力令人钦佩，每篇博客都有新的创意和价值。我建议您下一步可以探索更多HTML5的功能和应用，例如制作一个交互性更强的随机点名工具，或者分享一些HTML5在其他领域的应用案例。谦虚地说，我期待着您未来更多的精彩创作！如何快速涨粉，请看该博主的分享：https://hope-wisdom.blog.csdn.net/article/details/130544967?utm_source=csdn_ai_ada_blog_reply5

最新文章

目录

展开全部

收起

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。