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 相关文章推荐
alert中断settimeout计时功能
Jul 26 Javascript
js的回调函数详解
Jan 05 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
详解Angular2响应式表单
Jun 14 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
AngularJs点击状态值改变背景色的实例
Dec 18 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
vue+moment实现倒计时效果
Aug 26 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
PHP安全性漫谈
2012/06/28 PHP
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
jQuery将多条数据插入模态框的示例代码
2014/09/25 Javascript
jquery实现对联广告的方法
2015/02/05 Javascript
jquery实现不包含当前项的选择器实例
2015/06/25 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
js 递归和定时器的实例解析
2017/02/03 Javascript
BootStrap实现鼠标悬停下拉列表功能
2017/02/17 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
js+html获取系统当前时间
2017/11/10 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
2018/08/22 Javascript
webpack@v4升级踩坑(小结)
2018/10/08 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
LayUI动态设置checkbox不显示的解决方法
2019/09/02 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
python避免死锁方法实例分析
2015/06/04 Python
windows下python和pip安装教程
2018/05/25 Python
详解利用OpenCV提取图像中的矩形区域(PPT屏幕等)
2019/07/01 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
Python类及获取对象属性方法解析
2020/06/15 Python
pytorch cuda上tensor的定义 以及减少cpu的操作详解
2020/06/23 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
HTML5、Select下拉框右边加图标的实现代码(增进用户体验)
2017/10/16 HTML / CSS
配置管理计划的主要内容有哪些
2014/06/20 面试题
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
求职信格式范本
2013/11/15 职场文书
React如何创建组件
2021/06/27 Javascript
解析MySQL索引的作用
2022/03/03 MySQL