javaweb闲暇小程序之抽签程序

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

学自潭州学院视频

主程序页面截图

 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>