zoukankan      html  css  js  c++  java
  • javascript实现抽奖

    包含的知识点:计时器的使用,document对象的方法的使用,js数组的使用,js内置对象的使用,js系统函数的使用,注册事件。

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     5   <title>抽奖</title>
     6   <script type="text/javascript">
     7     var alldata = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z"2020-06-04
     8     var alldataarr = alldata.split(",");
     9     var num = alldataarr.length - 1;
    10     var timer;   
    11     function start() {
    12       clearInterval(timer);h
    13       timer = setInterval('change()', 10);
    14     }
    15     function change() {
    16       document.getElementById("oknum").innerHTML = alldataarr[GetRnd(0, num)];
    17     }
    18     function GetRnd(min, max) {
    19       return parseInt(Math.random() * (max - min + 1));
    20     }   
    21     function ok() {
    22       clearInterval(timer);
    23       document.getElementById("showresult").value = document.getElementById("oknum").innerText;
    24     }   
    25 </script> 
    26 </head>
    27 <body>
    28  
    29 <div id="oknum" name="oknum" >请单击开始</div> 
    30   <button onclick="start()" accesskey="s">开始</button>  <!--//accesskey 属性规定激活(使元素获得焦点)元素的快捷键。-->
    31 <button onclick="ok()" accesskey="o">停止</button> 
    32 您的选择是: 
    33 <input type="text" id="showresult" value=""/>
    34 </body>
    35 </html>
    你好,欢迎你来到博客,我是布莱昂。在这里你将看到我关于前端技术和框架的一些理解和体会,并且以后所有博客将在这里发布,由于本人技术水平和认知能力有限,文中难免有认识不足和理解错误的地方,欢迎大家留言指正,我将感激不尽!
  • 相关阅读:
    curl
    jQuery监控键盘事件
    SSL证书及HTTPS服务器
    小程序中接入微信支付完整教程
    微信小程序 icon组件详细介绍
    十步解决php utf-8编码
    php正则表达式过滤空格 换行符 回车
    css单位介绍em ex ch rem vw vh vm cm mm in pt pc px
    JavaScript返回上一页并自动刷新
    php的header函数之设置content-type
  • 原文地址:https://www.cnblogs.com/zxa2020/p/13042108.html
Copyright © 2011-2022 走看看