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 相关文章推荐
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
JS实现控制文本框的内容
Jul 10 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
实例详解vue中的$root和$parent
Apr 29 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
解决echarts数据二次渲染不成功的问题
Jul 20 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
Sep 02 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 Javascript
vue组件的路由高亮问题解决方法
May 11 Vue.js
浅谈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编写发红包程序
2015/07/22 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
php多文件打包下载的实例代码
2017/07/12 PHP
laravel Model 执行事务的实现
2019/10/10 PHP
JSON 教程 json入门学习笔记
2020/09/22 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
JavaScript设计模式之代理模式详解
2017/06/09 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
jQuery实现切换隐藏与显示同时切换图标功能
2017/10/29 jQuery
解决Webpack 热部署检测不到文件变化的问题
2018/02/22 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
2020/09/07 Javascript
[07:57]DOTA2热力大趴狂欢夜 广州站活动回顾
2013/11/27 DOTA
Python中常用操作字符串的函数与方法总结
2016/02/04 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
在Qt中正确的设置窗体的背景图片的几种方法总结
2019/06/19 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
python实现Pyecharts实现动态地图(Map、Geo)
2020/03/25 Python
python算的上脚本语言吗
2020/06/22 Python
python3爬虫中异步协程的用法
2020/07/10 Python
程序员经常用到的UNIX命令
2015/04/13 面试题
教师自我评价范文
2013/12/16 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
关于感恩的演讲稿400字
2014/08/26 职场文书
个人先进事迹材料
2014/12/29 职场文书
给学校的建议书400字
2015/09/14 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers