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 相关文章推荐
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
js中复制行和删除行的操作实例
Jun 25 Javascript
Ext中下拉列表ComboBox组件store数据格式用法介绍
Jul 15 Javascript
jQuery实现可以编辑的表格实例详解【附demo源码下载】
Jul 09 Javascript
详解jQuery选择器
Dec 21 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
Dec 09 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
vue实现购物车案例
May 30 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+javascript模拟Matrix画面
2006/10/09 PHP
PHP调用C#开发的dll类库方法
2014/07/28 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
浅谈PHP封装CURL
2019/03/06 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
js 解决“options为空或不是对象”
2008/12/22 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
2010/12/04 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
详解JavaScript函数绑定
2013/08/18 Javascript
jQuery中insertAfter()方法用法实例
2015/01/08 Javascript
JavaScript函数使用的基本教程
2015/06/04 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
jQuery实现菜单的显示和隐藏功能示例
2018/07/24 jQuery
深入理解react 组件类型及使用场景
2019/03/07 Javascript
使用node搭建自动发图文微博机器人的方法
2019/03/22 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
Python中表示字符串的三种方法
2017/09/06 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
Django开发的简易留言板案例详解
2018/12/04 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
Python小程序之在图片上加入数字的代码
2019/11/26 Python
python基于opencv检测程序运行效率
2019/12/28 Python
css3图片边框border-image的用法
2017/06/30 HTML / CSS
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
关于幼儿的自我评价
2013/12/18 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
python process模块的使用简介
2021/05/14 Python
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
Elasticsearch 聚合查询和排序
2022/04/19 Python