學自潭州學院視頻
主程序頁面截圖
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: 30px 46 } 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();//創建一個隨機數，大於0 79 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>