js实现随机点名程序


Posted in Javascript onSeptember 17, 2020

最近用到了一下随机点名程序,就自己整理一下。代码实现后的截图如下。

js实现随机点名程序

<!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-UA-Compatible" content="ie=edge">
 <title>随机点名</title>
 <style>
  #content{
   width: 600px;
   height: 400px;
   background: #000;
   margin: 100px auto;
   text-align: center;
   position: relative;
   line-height: 300px;
   color: dodgerblue;
   font-size: 70px;
  } 
  #btn1{
   background: #ccc;
   width: 180px;
   height: 80px;
   font-size: 30px;
   color: #f40;
   border-radius: 12px;
   position: absolute;
   bottom: 30px;
   left: 50%;
   margin-left: -90px;
   
  }
 
 </style>
</head>
<body>
 <div id="content">
  <span id="span1">
   点击开始
  </span>
  <button id="btn1">
   start
  </button>

 </div>

 <script>
  var arr = ['中国','英国','德国','美国','意大利','法国','西班牙','日本','阿联酋','荷兰','葡萄牙'];
  var $btn1 = document.getElementById('btn1');
  var $content = document.getElementById('content');
  var $span1 = document.getElementById('span1');
  var timer;//计时器
  var testNum = true;
  $btn1.onclick = function(){
   if(testNum){
    // console.log(1);
    start();
    $btn1.innerHTML = 'stop';
    testNum = false;
   }
   else{
    // console.log(0);
    stop();
    $btn1.innerHTML = 'start';
    testNum = true;
   }
  }
  function start(){
    timer = setInterval(function(){
     var num = random(0,arr.length - 1);
     $span1.innerHTML = arr[num];
    },50)
  }
  function stop(){
    clearInterval(timer);  
  }
  // 随机函数
  function random(a,b){
   var randomNum = Math.round(Math.random() * (b - a) + a);
   return randomNum;
  }  
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 错误处理的几种方法
Jun 13 Javascript
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
JQuery中form验证出错信息的查看方法
Oct 08 Javascript
jQuery 选择器详解
Jan 19 Javascript
javascript中call apply 与 bind方法详解
Mar 10 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
Node.js的特点详解
Feb 03 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
vue项目实战总结篇
Feb 11 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
JS自定义对象创建与简单使用方法示例
Jan 15 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
Nov 05 #Javascript
Vue通过WebSocket建立长连接的实现代码
Nov 05 #Javascript
原生js实现随机点名功能
Nov 05 #Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 #Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 #Javascript
javascript如何实现create方法
Nov 04 #Javascript
关于vue里页面的缓存详解
Nov 04 #Javascript
You might like
神盾加密解密教程(三)PHP 神盾解密工具
2014/06/08 PHP
PHP合并静态文件详解
2014/11/14 PHP
PHP类的声明与实例化及构造方法与析构方法详解
2016/01/26 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
基于thinkPHP框架实现留言板的方法
2016/10/17 PHP
PHP实现的防止跨站和xss攻击代码【来自阿里云】
2018/01/29 PHP
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
简单实现js鼠标跟随效果
2020/08/02 Javascript
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
Three.js实现浏览器变动时进行自适应的方法
2017/09/26 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
js中forEach,for in,for of循环的用法示例小结
2020/03/14 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
Python 正则表达式操作指南
2009/05/04 Python
零基础写python爬虫之打包生成exe文件
2014/11/06 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
Python实现FTP上传文件或文件夹实例(递归)
2017/01/16 Python
使用apidocJs快速生成在线文档的实例讲解
2018/02/07 Python
python绘制热力图heatmap
2020/03/23 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
浅谈python 导入模块和解决文件句柄找不到问题
2018/12/15 Python
pymysql之cur.fetchall() 和cur.fetchone()用法详解
2020/05/15 Python
Keras 实现加载预训练模型并冻结网络的层
2020/06/15 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
行政工作个人的自我评价
2014/02/13 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
汽车4S店前台接待岗位职责
2015/04/03 职场文书
前端学习——JavaScript原生实现购物车案例
2021/03/31 Javascript