数字幸运抽奖

最新推荐文章于 2021-11-18 16:59:37 发布

#不许人间见白头#

最新推荐文章于 2021-11-18 16:59:37 发布

阅读量267

点赞数

文章标签： css js html javascript html5

本文链接：https://blog.csdn.net/weixin_45936406/article/details/107646489

版权

前端小项目专栏收录该内容

5 篇文章 0 订阅

订阅专栏

数字幸运抽奖

<html>
	<head>
		<title>幸运抽奖</title>
		<style type="text/css">	
			/*id 加载器 #号+id名称*/
			#div1{
				color:red;
				font-size:100px;
				font-family:楷体;
			}
			/*类加载器 .号+类名称*/
			.container{
				margin:10px auto;
				height:130px;
				width:278px;
				
			}
			.numarea{
				margin: 5px;
				font-size:100px;
				float:left;/*左浮动*/
				background:red;
			}
			.btn{
				
				font-size:100px;
				margin:100px auto;
			
			}
			.tongji{
				font-size:50px;
				margin:15px 15px;
				background:red;
				float:left;
				width:200px;
			}
			#but{
			/*margin属性用于将div标签中的内容居中显示 auto水平居中 高度为10像素*/
				margin:10px auto;
				font-size:50px;
			}
		</style>
		<script type="text/javascript">
			var result;
		
			function luky(){
			
			//var random=parseInt(Math.random()*9999+1000);
			//设置四个随机数
			//var num1=parseInt(Math.random()*10);
			//var num2=parseInt(Math.random()*10);
			//var num3=parseInt(Math.random()*10);
			//var num4=parseInt(Math.random()*10);
			
			//获取当前页面数字区域的id
			//var tj=document.getElementById("tongji");
			// innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
			document.getElementById("num1").innerHTML=parseInt(Math.random()*10);
			document.getElementById("num2").innerHTML=parseInt(Math.random()*10);
			document.getElementById("num3").innerHTML=parseInt(Math.random()*10);
			document.getElementById("num4").innerHTML=parseInt(Math.random()*10);
			
			//setTimeout(luky,10);
	
		}
		function start(){
			
			//获取当前页面button按钮的id
			var but=document.getElementById("but")
				if(but.value=="开始"){
				    //设置定时器：setInterval，经过10ms执行一次luky()函数
					result= setInterval(luky,10);
					but.value="停止";
			
				}else{
					//消除指定的定时器
					clearInterval(result);
					but.value="开始";
					var tj =document.getElementById("tongji");
					tj.innerHTML+=document.getElementById("num").innerText+"<br>";
				}
		}
		
		</script>
	</head>
	<body>
		<div align="center" id="div1">幸运抽奖^^^</div>
		<div align="center" id="num" class="container">
			<div class="numarea" id="num1">0</div> 
			<div class="numarea" id="num2">0</div> 
			<div class="numarea" id="num3">0</div>
			<div class="numarea" id="num4">0</div>
		</div>
		<br>
		<div align="left"  id="tongji">
			<font size="5" color="red">中奖数字为：</font><br>
			
		</div>
		<div align="center" id="div3" class="btn">
			<input type="button" value="开始" id="but" onclick="start()">
		</div>
	<body>

</html>

#不许人间见白头#

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
数字幸运抽奖

数字幸运抽奖<html> <head> <title>幸运抽奖</title> <style type="text/css"> /*id 加载器 #号+id名称*/ #div1{ color:red; font-size:100px; font-family:楷体; } /*类加载器 .号+类名称*/ .container{ margin:10px auto; he
复制链接

扫一扫