原生js写随机点名案例

最新推荐文章于 2024-03-11 00:45:00 发布
最新推荐文章于 2024-03-11 00:45:00 发布
阅读量222 收藏
点赞数
文章标签： javascript css html5 css3 es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kevin_ZKW/article/details/104831299
版权 

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

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

    .box {
        width: 200px;
        height: 100px;
        line-height: 100px;
        font-size: 30px;
        background: dodgerblue;
        margin: auto;
        text-align: center;
    }

    .btn {
        width: 200px;
        height: 50px;
        margin: auto;
        line-height: 50px;
        text-align: center;
    }

    .btn button {
        margin: 0 10px;
        width: 60px;
        height: 30px;
        line-height: 30px;
        font-size: 20px;
    }
</style>

<body>
    <div class="box">
        点击开始
    </div>
    <div class="btn">
        <button class="start">开始</button>
        <button class="stop">结束</button>
    </div>
</body>
<script>
    var arr = ['小明', '丽丽', '妹妹', 'never', '帅弟弟', '佩奇', '汤姆', '王二麻子', 'baby', '梅梅', '赵钱李', 'jack']
    function $(ele) { return document.querySelector(ele) }
    var timer = null;//初始化计时器
    //开始
    $('.start').onclick = function () {
        timer = setInterval(function () {
            //获取下标
            var index = parseInt(Math.random() * arr.length)
            $('.box').innerHTML = arr[index]
        }, 800)
    }
    //停止按钮
    $('.stop').onclick = function () {
        clearInterval(timer);
    }
</script>
</html>

 

Eva_kevin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js课堂案例 实现动态随机点名的效果
qq_59219560的博客
04-24 510
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随.
【JS】随机点名小案例
weixin_51290060的博客
08-02 1252
点击开始随机抽取，点击结束输出结果
JS：随机点名案例
最新发布
Saala的博客
03-11 1062
思路：将名单列成一个数组，通过生成随机数下标获取名单，达到随机点名的效果。给出一份名单，进行随机点名。
JS案例：随机点名
pe11223的博客
01-15 225
JS案例：随机点名
JS-案例-随机点名
Joker.M的博客
06-05 446
第一种，点击一次鼠标，输出一个name <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:...
原生js实现随机点名功能
10-16
在本文中，我们将探讨如何使用原生JavaScript实现一个随机点名的功能。这个功能主要用于教学或会议场合，可以随机选取参与者的姓名。以下是实现这个功能的关键技术和步骤： 1. **HTML 结构**： - 页面包含一个类名...
原生js实现随机点名
10-15
在本文中，我们将深入探讨如何使用原生JavaScript实现一个简单的随机点名系统。这个系统包含了一个HTML页面，其中有两个按钮，一个是“开始”按钮，另一个是“结束”按钮，以及一个用于显示被点名者姓名的`<h1>`元素...
原生JS实现随机点名项目的实例代码
10-17
在本文中，我们将探讨如何使用原生JavaScript实现一个随机点名项目。这个项目的核心功能是生成一个随机的编号，对应着学生列表中的一个名字，以此进行点名。下面我们将详细介绍实现这个功能所需的技术和步骤。 首先...
JavaScript案例:随机点名
weixin_45048878的博客
06-02 568
Document 随机点名器 开 始 <script> //声明 所有的人名 组成的数组 var nameList = ['苏媛','陈露','王艳','王菲菲','陶正祥','彭文磊','袁杰','林凡浩','冯思玲','蔡严丽','顾思语','朱才华','陈乔','郭东文','余海涛','程鹏睿','许辰辰','马飞雄','方炜','姜熠杰'...
JavaScript(webAPI)【随机点名案例】
Coding
03-24 663
JavaScript(webAPI)【随机点名案例】
js实现随机点名系统(实例讲解)
10-19
下面小编就为大家带来一篇js实现随机点名系统(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Javascript+html做的班级随机点名
05-24
Javascript+html做的班级随机点名，供大家学习
JS小案例-随机点名器
m0_51068451的博客
12-04 379
随机点名器
JS案例学习——随机点名案例
weixin_57385603的博客
02-28 2594
JS案例学习——随机点名案例
JS入门小案例5-随机点名案例
jiuliangliang的博客
02-09 395
定义一个名字数组，并且随机点名
利用javascript实现随机点名案例
qq_33406282的博客
04-13 160
利用javascript实现随机点名案例 <!DOCTYPEhtml> <htmllang="zh-CN"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-sc...
简单的JavaScript+HTML随机点名器
wjfckx的博客
09-16 3417
JavaScript 编写简单的随机点名器 这是一次使用 JavaScript来编写随机点名器的静态网页页面。如果你想学习如何使用JavaScript等知识的话可以关注本公众号,后面我会写一下入门学者的可以很好入手的JavaScript作品 随机点名器 随机点名器是我们大学里面最恐怖的软件，每一次上课提问的时候每个人都是心惊胆战的看着屏幕，现在我就带大家了解一下随机点名器的代码原理： 界面的设计 我这里用的是表格形式写的随机点名框 // An highlighted block <table b
简单版随机点名js
@贵阳可达鸭
06-29 306
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
原生js写三级分销小demo
01-10
原生 JavaScript 实现三级分销小 Demo 的主要步骤如下： 1. 创建三个用户： 1) 顶级用户：拥有最高级别的分销权力。 2) 一级用户：由顶级用户推广而来，拥有中级分销权力。 3) 二级用户：由一级用户推广而来，拥有最低级别的分销权力。 2. 定义用户类，并设置三个属性：姓名、级别、推广收益。 ```javascript class User { constructor(name, level) { this.name = name; this.level = level; this.profit = 0; } } ``` 3. 创建用户实例，并设置级别和姓名： ```javascript const topUser = new User("顶级用户", "顶级"); const firstLevelUser = new User("一级用户", "一级"); const secondLevelUser = new User("二级用户", "二级"); ``` 4. 实现用户推广的方法，即通过推广链接注册用户，上级用户获得相应的推广收益： ```javascript function promoteUp(user, invitee) { if (user.level === "顶级") { invitee.profit += 100; // 顶级用户推广新用户获得100元推广收益 } else if (user.level === "一级") { invitee.profit += 50; // 一级用户推广新用户获得50元推广收益 } else if (user.level === "二级") { invitee.profit += 30; // 二级用户推广新用户获得30元推广收益 } } ``` 5. 测试推广的过程： ```javascript promoteUp(topUser, firstLevelUser); // 顶级用户推广一级用户 promoteUp(firstLevelUser, secondLevelUser); // 一级用户推广二级用户 ``` 6. 输出用户的推广收益： ```javascript console.log(topUser.profit); // 输出 100 console.log(firstLevelUser.profit); // 输出 50 console.log(secondLevelUser.profit); // 输出 30 ``` 这就是一个简单的原生 JavaScript 实现的三级分销小 Demo。通过不同的级别和推广链接，上级用户可以获得相应的推广收益。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值