学自潭州学院视频
主程序页面截图
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <title>抽签系统</title> 8 9 <style type="text/css">10 .activity {11 width: 600px;12 height: 300px;13 border: 1px solid;14 margin: 150px auto;15 }16 17 .text {18 width: 600px;19 height: 100px;20 background: #379be9;21 text-align: center;22 line-height: 100px;23 font-size: 28px;24 color: white;25 }26 27 body {28 font-size: 12px;29 font-family: "微软雅黑";30 color: #666;31 }32 33 .myform {34 text-align: center;35 margin: 10px;36 }37 38 .a_value {39 width: 200px;40 height: 40px;41 line-height: 40px;42 font-size: 24px;43 text-align: center;44 margin-top: 40px;45 margin-bottom: 30px46 }47 48 .btn {49 width: 100px;50 height: 30px;51 }52 </style>53 </head>54 <body>55 <!-- div层，盒子，容器 -->56 <div class="activity">57 <div class="text" id="myText">抽签系统</div>58 <div class="myform">59 <input type="text" class="a_value" id="myRandom"></br>60 <input type="button" value="开始" class="btn" onclick="myStart()">61 <input type="button" value="停止" class="btn" onclick="myStop()">62 </div>63 </div>64 <!-- 动态脚本 -->65 <script type="text/javascript">66 //开始抽奖的方法67 var timer = null;//定时器的变量68 var data = "宿兵畅,尹博文,王悦雪,杜舟,康泽生,武凡,高梦轩,佘士耀,魏昭宇";//抽奖数据，以逗号分隔69 //分拆抽奖的数据为数组70 var arr = data.split(",");71 function myStart() {72 //开始之前清空文本框73 document.getElementById("myRandom").value = "";74 if (!timer) {75 //创建定时器76 timer = setInterval(function change(){77 var max = arr.length - 1;//数组的长度78 var rand = Math.random();//创建一个随机数，大于079 var randIndex = parseInt(rand * max);//得到整型数据80 var text_val = document.getElementById("myText");//获取文本框区域的值81 text_val.innerHTML = arr[randIndex];//文本框的值显示在页面82 },50);//每50毫秒的间隔，更快的是数字变小83 }84 85 }86 87 function myStop(){88 clearInterval(timer);//清除定时器89 timer = null;//变量定时器的清空90 var myText = document.getElementById("myText");//获取变化区域的值91 var myRandom = document.getElementById("myRandom");//获取文本框里面的值92 myRandom.value = myText.innerHTML;//给文本框赋新值93 }94 </script>95 </body>96 </html>
主要代码
