js抽奖小程序,动态添加表格,

最新推荐文章于 2024-04-08 14:54:53 发布

刘昕hrf

最新推荐文章于 2024-04-08 14:54:53 发布

阅读量224

点赞数

分类专栏： js html css 文章标签： html html5 css

本文链接：https://blog.csdn.net/weixin_43447266/article/details/120190059

版权

js 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

css

7 篇文章 0 订阅

订阅专栏

js抽奖小程序代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		* {
			margin: auto;
			padding: auto;
		}
		
		table {
			border-collapse: collapse;
		}
		
		td {
			width: 100px;
			height: 50px;
			background-color: #FAEBD7;
			text-align: center;
			line-height: 50px;
		}
		
		.box button {
			display: block;
			margin: 0px auto;
			width: 100px;
			height: 50px;
			background-color: rosybrown;
		}
	</style>

	<body>
		<table border="1px" cellspacing="0" cellpadding="0">
			<tr>
				<!--<td>1</td>
			<td>2</td>
			<td>3</td>
			<td>4</td>-->
			</tr>
		</table>
		<div class="box">
			<button onclick="changeButton()">抽奖</button>
		</div>
	</body>

</html>
<script>
	//	找到table元素
	var table = document.querySelector("table");
	var arr = [
		[1, 2, 3, 4],
		[5, 6, 7, 8],
		[9, 10, 11, 12],
		[13, 14, 15, 16]
	];
	//动态添加数组放到表格中
	function add() {
		//循环数组添加到每一行每一列
		for(var i = 0; i < arr.length; i++) {
			//添加行
			var tr = table.insertRow(i);
			for(var j = 0; j < arr[i].length; j++) {
				var td = tr.insertCell(j);
				//给td中的单元格中添加文本
				td.innerHTML = arr[i][j];
			}
		}
	}
	//add();
	//因为从数据库中传进来的是一维数组所以要用一维数组传入		
	function add1(){
		var arr1 = [1,2,3,4,5,6,7,8,
				9,10,11,12,13,14,15,16,
				17,18,19];
		//每行显示列数
	//行数, 总人数/列数
		var rowlength = Math.ceil(arr1.length/4);
		var num = 0;
		for(let i =0;i<rowlength;i++){
			//添加行
			var tr = table.insertRow(i);
			for (var j = 0; j < 4; j++) {
				if (num<arr1.length) {
					//添加列每一行添加列
					var td = tr.insertCell(j);
						//赋值
					td.innerHTML = arr1[num++];
				}
				
			}
		}
	}
	add1();

	//随机一行一列进行标记
	function repeat() {
		//清空原有的背景颜色
		//1.记录内容然后进行清空,2.所有的都循环清空制为透明色
		//清除按钮的颜色变成背景色或者按钮色变成透明色
		for(var i = 0; i < table.rows.length; i++) {
			for(var j = 0; j < table.rows[i].cells.length; j++) {
				table.rows[i].cells[j].style.backgroundColor = "#FAEBD7";
			}
		}

		//考虑点击一次会让随机选中的变色
		//			获得行的随机下标
		var trIndex = Math.floor(Math.random() * table.rows.length);
		//			//获得列的下标
		var tdIndex = Math.floor(Math.random() * table.rows[trIndex].cells.length)
		//改变选中的单元格的背景颜色,关键是随机获取下标
		var cell = table.rows[trIndex].cells[tdIndex];
		cell.style.backgroundColor = "red";
	}

	//获取button按钮
	var button = document.querySelector("button");
	//定义变量,定义在外面,每次点击onclick时间就调用一次然后不断变换flag的值.
	var flag = false;
	var mySetInterval;
	//点击抽奖开始,然后抽奖按钮里面的文本变成结束按钮,同理结束按钮变成抽奖按钮
	function changeButton() {
		if(flag == false) {
			//里面的元素变成结束
			button.innerHTML = "结束";
			//使用定时器
			mySetInterval = setInterval("repeat()", 100);

			flag = true;
		} else {
			button.innerHTML = "抽奖";
			clearInterval(mySetInterval);
			flag = false;
		}
	}
</script>

代码效果展示

在这里插入图片描述

刘昕hrf

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js抽奖小程序,动态添加表格,

js抽奖小程序代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> * { margin: auto; padding: auto; } table { border-collapse: collapse;
复制链接

扫一扫