js实现随机点名小功能


Posted in Javascript onAugust 17, 2017

本文实例为大家分享了js实现随机点名功能的具体代码,供大家参考,具体内容如下

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
 </head> 
 <body> 
  <div id="name1"></div> 
  <button id="btn">stop</button> 
   
 </body> 
 <script type="text/javascript"> 
  var flag = true; 
  var str = "张三,李四,王五,马六"; 
  var arr = str.split(","); 
  var interId = setInterval("randName()",100); 
  function randName(){ 
   var rand = Math.floor(Math.random() * arr.length); 
   name1.innerHTML = arr[rand]; 
  }  
  btn.onclick = function (){ 
   if (flag) { 
    btn.innerHTML = "start"; 
    clearInterval(interId); 
    flag = false; 
   } else{ 
     
 
btn.innerHTML = "stop"; 
    interId = setInterval("randName()",100); 
    flag = true; 
   } 
  } 
 </script> 
</html>

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

Javascript 相关文章推荐
javascript通过navigator.userAgent识别各种浏览器
Oct 25 Javascript
关于JS数组追加数组采用push.apply的问题
Jun 09 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
jQuery遍历json的方法(推荐)
Jun 12 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
Vue常用指令详解分析
Aug 19 Javascript
利用Vue构造器创建Form组件的通用解决方法
Dec 03 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 Javascript
JS实现数组去重的11种方法总结
Apr 04 Javascript
浅谈Vuejs Prop基本用法
Aug 17 #Javascript
简单快速的实现js计算器功能
Aug 17 #Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 #jQuery
如何理解Vue的.sync修饰符的使用
Aug 17 #Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 #Javascript
js编写简单的聊天室功能
Aug 17 #Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
Aug 17 #Javascript
You might like
星际争霸秘籍
2020/03/04 星际争霸
PHP 变量类型的强制转换
2009/10/23 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
php语言注释,单行注释和多行注释
2018/01/21 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
很好用的js日历算法详细代码
2013/03/07 Javascript
深入理解JavaScript系列(33):设计模式之策略模式详解
2015/03/03 Javascript
input输入框鼠标焦点提示信息
2015/03/17 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
JS之相等操作符详解
2016/09/13 Javascript
jquery dataview数据视图插件使用方法
2016/12/23 Javascript
jQuery基于ajax操作json数据简单示例
2017/01/05 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
AngularJS基于MVC的复杂操作实例讲解
2017/12/31 Javascript
详解layui中的树形关于取值传值问题
2018/01/16 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
layer更改皮肤的实现方法
2019/09/11 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
Python中splitlines()方法的使用简介
2015/05/20 Python
Python实现全角半角字符互转的方法
2016/11/28 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Python如何获取文件指定行的内容
2020/05/27 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
人事助理岗位职责
2013/11/18 职场文书
拾金不昧的表扬信
2014/01/16 职场文书
委托书范本
2014/04/02 职场文书
遵纪守法演讲稿
2014/05/23 职场文书