search

Home >Web Front-end >JS Tutorial >js implementation of web page lottery example_javascript skills

js implementation of web page lottery example_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:47:001378browse

The example in this article describes the method of implementing web page lottery with js. Share it with everyone for your reference. The details are as follows:

This webpage lottery program is implemented based on javascript code. It simply demonstrates how to use JS to implement the lottery function. Click the "Start Lottery" button and the program will start the lottery. When you need to stop, press "Stop". Posted before There are several similar lottery programs. If you are interested, search for "Lottery" in the special effects section of this website to take a look.

The operation effect is as shown below:

The specific code is as follows: 

<!DOCTYPE html>
<html lang="zh">
<head>
<title>抽奖程序</title>
<script type="text/javascript"> 
var randNum=Math.random()*10;
function testTime(){
document.getElementById("testtime").innerHTML="<h2>"+Math.floor(Math.random()*10)+"</h2>";
}
function setTime(mark){
timer=null;
timer=setInterval(testTime,12);
if(mark=='stop'){
  clearInterval(timer);
}
return timer;
}
function clearTime(timer){ }
</script>
<style type="text/css">
<!--
body {font-family: Arial;color:#fff;margin: 0px;padding: 0px;background:#000;text-align:center;}
#happyness{font-size:186px;line-height:186px;margin-top:100px;}
-->
</style>
</head>
<body>
</body>
<button onClick="timer=setInterval(testTime,12);" value="" style="width:100px;height:30px">开始抽奖</button>
<button onClick="clearInterval(timer);" value="Stop" style="width:100px;height:30px">停止</button>
<div id="testtime" style="font-size:25px"></div>
</html>

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：js click list text corresponding to the row display background color implementation code_javascript skillsNext article：js click list text corresponding to the row display background color implementation code_javascript skills

Related articles

See more