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 学习笔记(onchange等)
Nov 14 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
js 一个关于图片onload加载的事
Nov 10 Javascript
JavaScript定义类和对象的方法
Nov 26 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
AngularJS实现树形结构(ztree)菜单示例代码
Sep 18 Javascript
JavaScript中错误正确处理方式小结你用对了吗
Oct 10 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
Vue 换肤的示例实践
Jan 23 Javascript
Vue-component全局注册实例
Sep 06 Javascript
Vue响应式原理Observer、Dep、Watcher理解
Jun 06 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 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
php生成xml简单实例代码
2009/12/16 PHP
PHP使用递归算法无限遍历数组示例
2017/01/13 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
从JavaScript 到 JQuery (1)学习小结
2009/02/12 Javascript
JavaScript 撑出页面文字换行
2009/06/15 Javascript
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
jQuery中的val()示例应用
2014/02/26 Javascript
js焦点文字滚动效果代码分享
2015/08/25 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
jQuery获取table下某一行某一列的值实现代码
2017/04/07 jQuery
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
vue项目中使用rem,在入口文件添加内容操作
2020/11/11 Javascript
将图片文件嵌入到wxpython代码中的实现方法
2014/08/11 Python
Python实现多行注释的另类方法
2014/08/22 Python
python中返回矩阵的行列方法
2018/04/04 Python
Python subprocess库的使用详解
2018/10/26 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python输出指定字符串的方法
2020/02/06 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
村委会换届选举方案
2014/05/03 职场文书
污水处理保证书
2015/05/09 职场文书
民事申诉状范本
2015/05/20 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript