一区二区三区在线-一区二区三区亚洲视频-一区二区三区亚洲-一区二区三区午夜-一区二区三区四区在线视频-一区二区三区四区在线免费观看

服務器之家:專注于服務器技術及軟件下載分享
分類導航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服務器之家 - 編程語言 - JavaScript - js教程 - 原生JavaScript實現隨機點名表

原生JavaScript實現隨機點名表

2021-12-31 16:26棟棟很優秀啊 js教程

這篇文章主要為大家詳細介紹了原生JavaScript實現隨機點名表,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript隨機點名表的具體代碼,供大家參考,具體內容如下

效果:

原生JavaScript實現隨機點名表

代碼:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
  .box{
  width:300px;
  height:200px;
  border:1px solid #ccc;
  /*position: absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin: auto;*/
  margin: 100px auto;
  text-align: center;
  }
  h1{
  width:150px;
  height:60px;
  line-height: 60px;
  text-align: center;
  font-size: 30px;
  background-color: red;
  margin: 10px auto;
  }
  button{
  width:100px;
  height:40px;
  background-color: dodgerblue;
  border:0;
  font-size: 24px;
  color:#fff;
  }
  
  
 </style>
 </head>
 <body>
 <div class="box">
  <h1></h1>
  <button>開始</button>
  <button>停止</button>
 </div>
 <script>
  var h1=document.getElementsByTagName('h1')[0];
  var btn=document.getElementsByTagName("button");
  var arr=["蘇晨旭","張志陽","小明","社會坤哥","藥","敬珍","錦濤","網管","社會辰哥","渣男","雪","寶貝曼","大個","睡神","龍爺","英兒","東北娃","珂珂","黃花大閨女","狗蛋","狗子","天嬌","志強","晉瑋","海濤","邁姐","新鳳","環姐","二狗"];
  
  var ind=ranFun(0,arr.length-1)
  
  h1.innerHTML=arr[ind];
  var timer;
  btn[0].onclick=function(){
  clearInterval(timer)
  timer=setInterval(function(){
   h1.innerHTML=arr[ranFun(0,arr.length-1)]
  },100)
  }
  
  btn[1].onclick=function(){
  clearInterval(timer)
  }
  
  function ranFun(a,b){
  return Math.floor(Math.random()*(b-a+1)+a)
  }
 </script>
 </body>
</html>

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持服務器之家。

原文鏈接:https://blog.csdn.net/dongdongaa0/article/details/112506455

延伸 · 閱讀

精彩推薦
  • js教程你不知道的 JS 沙箱隔離

    你不知道的 JS 沙箱隔離

    本文接下來的內容,將介紹我在探索基于 Web Worker 實現 JavaScript 沙箱隔離方案過程中的一些資料收集、理解以及我的踩坑和思考的過程。...

    前端大全10202021-12-29
  • js教程JavaScript實現瀑布流布局的3種方式

    JavaScript實現瀑布流布局的3種方式

    這篇文章主要為大家詳細介紹了JavaScript實現瀑布流布局的3種方式,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    杏子_10247272021-12-20
  • js教程JS 的 六種打斷點的方式,你用過幾種?

    JS 的 六種打斷點的方式,你用過幾種?

    Debugger 是前端開發很重要的一個工具,它可以在我們關心的代碼處斷住,通過單步運行來理清邏輯。而 Debugger 用的好壞與斷點打得好壞有直接的關系。...

    神光的編程秘籍7822021-12-16
  • js教程一篇文章教會你使用 JavaScript 創建對象

    一篇文章教會你使用 JavaScript 創建對象

    本文基于JavaScrip基礎,介紹如何去創建一個對象,通過從最基礎的對象屬性,對象方法,使用new Object()創建構造方法,最后介紹了對象的可變性,比較對象...

    前端進階學習交流8102021-12-28
  • js教程詳解Typescript里的This的使用方法

    詳解Typescript里的This的使用方法

    這篇文章主要介紹了詳解Typescript里的This的使用方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們...

    hardfist7112021-12-28
  • js教程js實現頭像上傳并且可預覽提交

    js實現頭像上傳并且可預覽提交

    這篇文章主要介紹了js如何實現頭像上傳并且可預覽提交,幫助大家更好的理解和使用js,感興趣的朋友可以了解下...

    harold10244042021-12-20
  • js教程js仿淘寶放大鏡效果

    js仿淘寶放大鏡效果

    這篇文章主要為大家詳細介紹了js仿淘寶放大鏡效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    屈小康11052021-12-21
  • js教程原生JS實現pc端輪播圖效果

    原生JS實現pc端輪播圖效果

    這篇文章主要為大家詳細介紹了原生JS實現pc端輪播圖效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下...

    qq_1519846510082021-12-15
主站蜘蛛池模板: 波多野结衣之高校教师 | 亚洲无限 | 精品综合久久久久久8888 | 国产精品免费综合一区视频 | 菠萝视频污 | 四虎在线永久免费视频网站 | 91精品啪在线观看国产日本 | 日本免费不卡在线一区二区三区 | 男人疯狂擦进女人下面 | 羞羞污视频 | 厨房高h| 日本一在线中文字幕天堂 | 特黄特级毛片免费视 | 9191视频 | 500福利第一导航 | 人人九九 | 欧美精品一区二区三区免费 | bl动漫在线观看 | 俺去俺来也在线www色官网 | 亚洲国产黄色 | h版欧美大片免费观看 | 黑帮大佬与我的365天2标清中文 | 新新电影理论中文字幕 | va在线视频| 久久精品午夜一区二区福利 | 午夜伦伦电影理论片费看 | 日韩毛片免费在线观看 | 午夜性色一区二区三区不卡视频 | 久久这里只有精品视频9 | 99久久精品自在自看国产 | 高清国产在线 | 97视频久久久 | 亚洲四虎影院 | 男人天堂官方网站 | 日韩精品在线视频观看 | 欧美日韩亚洲第一区在线 | 99在线精品日韩一区免费国产 | 国产精品美女久久久久 | 污文啊好棒棒啊好了 | 欧美一级鲁丝片免费看 | 亚洲 日韩 国产 中文视频 |