js实现随机点名小功能

 更新时间:2017年08月17日 09:59:57   作者:蒲小若  
这篇文章主要为大家详细介绍了js实现随机点名小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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运动减速效果实例分析

    这篇文章主要介绍了JavaScript运动减速效果,模拟了物体做减速运动的效果,以两个实例形式分析了javascript实现物体做减速运动的实现技巧,涉及javascript动态操作页面元素样式及数学运算的方法,非常简洁实用,需要的朋友可以参考下
    2015-08-08
  • el-table el-table-column表头嵌套循环数据的示例代码

    el-table el-table-column表头嵌套循环数据的示例代码

    本文介绍了使用两个数组来实现el-table中表头的嵌套循环,一个数组用于循环表格数据,另一个用于循环表头,帮助读者更好地理解和应用表头嵌套功能,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • JavaScript纯前端实现在线GIF压缩

    JavaScript纯前端实现在线GIF压缩

    这篇文章主要为大家详细介绍了如何利用JavaScript纯前端实现在线GIF压缩工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • JavaScript设计模式之代理模式实例分析

    JavaScript设计模式之代理模式实例分析

    这篇文章主要介绍了JavaScript设计模式之代理模式,简单描述了代理模式的概念、原理并结合实例形式分析了javascript代理模式的相关实现与使用技巧,需要的朋友可以参考下
    2019-01-01
  • 使用PDFJS遇到的坑及解决办法记录

    使用PDFJS遇到的坑及解决办法记录

    PDF.js是由Mozilla支持的基于HTML5的PDF查看器,可以在web上解析和呈现PDF文件,它支持内容检索、页面跳转、文件打印等功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 微信小程序实现tab组件切换动画

    微信小程序实现tab组件切换动画

    tab相对而言用的还是比较多的,但是用起来并没有难,下面这篇文章主要给大家介绍了关于微信小程序全局配置之tab的相关资料,文中通过图文以及示例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • javascript中in运算符用法分析

    javascript中in运算符用法分析

    这篇文章主要介绍了javascript中in运算符用法,实例分析了in运算符的相关使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 浅谈webpack devtool里的7种SourceMap模式

    浅谈webpack devtool里的7种SourceMap模式

    这篇文章主要介绍了浅谈webpack devtool里的7种SourceMap模式,主要介绍了这7种模式的使用和打包编译后的结果的不同,非常具有实用价值,有兴趣的可以了解一下
    2019-01-01
  • Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码

    Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码

    下面小编就为大家分享一篇Js判断H5上下滑动方向及滑动到顶部和底部判断的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11
  • javascript中的注释使用与注意事项小结

    javascript中的注释使用与注意事项小结

    在javascript中有两种注释方式,单行注释与多行注释。
    2011-09-09

最新评论