网页设计(十二)DOM与BOM应用案例

在这里插入图片描述


一、体彩大乐透投注程序

1.游戏规则

超级大乐透基本投注是指从前区号码中任选五个号码,并从后区号码中任选两个号码的组合进行投注。其中,前区号码由01~35共三十五个号码组成,后区号码由01 ~12共十二个号码组成。每注基本投注金额人民币2元。
购买者在基本投注的基础上,可对购买的每注号码进行一次追加投注,每注追加投注金额人民币1元。

2.页面效果:
体彩大乐透投注程序页面
在这里插入图片描述

单击“前区机选”时页面
在这里插入图片描述

单击“后区机选”时页面
在这里插入图片描述

单击“确认合并”时页面
在这里插入图片描述

单击“机选1注”时页面
在这里插入图片描述

<!-- prj_12_1.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>体彩大乐透投注程序</title>
		<style type="text/css">
			div {
				width: 563px;
				height: 400px;
				margin: 0px auto;
				border: 2px solid #ff3300;
			}

			h2 {
				font-size: 22px;
				text-align: center;
			}

			td {
				font-weight: bold;
				font-size: 16px;
				text-align: center;
			}

			input {
				font-size: 16px;
			}

			[type='button'] {
				margin: 2px 20px;
				width: 120px;
				padding: 5px;
			}

			#dalete {
				width: 450px;
				color: red;
				font-size: 22px;
			}
		</style>
		<script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}

			function frontSel35to5() {
				// 定义数组并初始化
				var number35 = new Array(35); // 号码候选整数数组
				for (var i = 0; i < 35; i++) {
					number35[i] = (101 + i).toString().substr(1, 2);
				}
				// 随机产生,35个整数中随机选5个不重复的整数
				var number5 = new Array(5); // 存放随机产生5个整数
				for (var i = 0; i < 5; i++) {
					var index = Math.floor(Math.random() * number35.length);
					number5[i] = number35[index];
					number35.splice(index, 1); // 删除已选元素
					// console.log(number35);
				}
				console.log(number5)
				$("number1").value = number5.sort().toString();
				$("dalete").value = "";
				return number5.sort().toString();
			}

			function endtSel12to2() {
				// 定义数组并初始化
				var number12 = new Array(12);
				for (var i = 0; i < 12; i++) {
					number12[i] = (101 + i).toString().substr(1, 2);
				}
				var number2 = new Array(2);
				for (var i = 0; i < 2; i++) {
					var index = Math.floor(Math.random() * number12.length);
					number2[i] = number12[index];
					number12.splice(index, 1); // 删除已选元素
				}
				$("number2").value = number2.sort().toString();
				$("dalete").value = "";
				return number2.sort().toString();
			}

			function joinNumber() {
				var number1 = $("number1").value;
				var number2 = $("number2").value;
				if (number1 != "" & number2 != "") {
					$("dalete").value = number1 + "+" + number2 + "(1注,2元)";
				} else {
					$("dalete").value = "必须先单击上面两个按钮,生成前区和后区码!"
				}
			}

			function createNumber() {
				// 合成大乐透号码,并显示在div中。
				var number = frontSel35to5() + "+" + endtSel12to2() + "(1注,2元)"
				$("dalete").value = number;
			}
		</script>
	</head>

	<body>
		<div id="" class="">
			<img src="pro121/tycp.jpg">
			<form method="post" action="">
				<table align="center" width="250px" cellspacing="5px">
					<caption>
						<h2>体彩大乐透投注程序</h2>
					</caption>
					<tr>
						<td>前区号码-35选5</td>
						<td>后区号码-12选2</td>
					</tr>
					<tr>
						<td><input type="text" name="number1" id="number1" readonly></td>
						<td><input type="text" name="number2" id="number2" readonly>
					</tr>
					<tr>
						<td><input type="button" value="前区机选" onclick="frontSel35to5()" /></td>
						<td><input type="button" value="后区机选" onclick="endtSel12to2()" /></td>
					</tr>
					<tr>
						<td colspan="2">
							<input type="button" value="确认合并" onclick="joinNumber()">
							<input type="button" value="机选1注" onclick="createNumber()"><input type="reset" value="清空">
						</td>
					</tr>
					<tr>
						<td colspan="2">
							<input id="dalete" type="text" readonly>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</body>
</html>

二、简易图书选购程序

  1. 文字素材
    选购图书
    输入图书信息
    图书名称:
    图书定价:

图书备选区图书信息:

计算机网络(32元)
数据结构(58元)
Java程序设计(45元)
Web前端开发技术(49元)
Web前端开发技术实验与实践(35元)
计算机组成原理(30元)
数据库开发技术(30元)

  1. 页面效果图
    简易图书选购程序初始页面
    在这里插入图片描述

新增图书时页面
在这里插入图片描述

单一选购时页面
在这里插入图片描述

单一退购时页面
在这里插入图片描述

结帐时页面
在这里插入图片描述

<!-- prj_12_2.html 
  功能:图书选购程序,具有添加、单一选购、
  单一退购、清空、结账等功能
-->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>简易图书选购程序</title>
		<style type="text/css">
			* {
				font-size: 18px;
			}

			select {
				width: 310px;
				height: 260px;
			}

			#bookshop {
				border: 10px solid #F1F2F3;
				margin: 0 auto;
				padding: 20px;
				border-radius: 20px;
				width: 620px;
			}

			[type="button"] {
				margin: 2px 5px;
				width: 110px;
			}

			input:hover {
				border: 1px dashed red;
			}

			#note {
				text-align: center;
				color: red;
				font-size: 22px;
				background-color: #F1F2F3;
			}
		</style>

		<script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}

			function doOne() { //单本选购
				if ($("booklist").selectedIndex != -1) {
					newoption = document.createElement("option");
					newoption.text = $("booklist").options[$("booklist").selectedIndex].text;
					newoption.value = $("booklist").options[$("booklist").selectedIndex].value;
					$("selectedlist").add(newoption);
					// 以下采用克隆方法
					// $("selectedlist").appendChild($("booklist").options[$("booklist").selectedIndex].cloneNode(true))
				}
			}

			function clearNone() { //清空
				while ($("selectedlist").length > 0) {
					$("selectedlist").remove(0);
				}
				// 清空结算信息提示区
				$("note").innerHTML = "";
			}

			function undoOne() { //退购
				if ($("selectedlist").selectedIndex == -1) {
					alert("请先在右边选中某一图书,再退购!")
				}
				var i = 0;
				while (i < $("selectedlist").length) {
					if ($("selectedlist").selectedIndex != -1) {
						$("selectedlist").remove($("selectedlist").selectedIndex);
					}
					i++;
				}
			}

			function checkOut() { //结帐,在div 中显示
				for (var i = 0, sum = 0; i < $("selectedlist").length; i++) {
					sum = sum + parseFloat($("selectedlist").options[i].value);
				}
				// alert("请您付款" + sum + "元,欢迎下次光临!");
				$("note").innerHTML = "请您付款" + sum + "元,欢迎下次光临!";
			}

			function addBook() { // 新增图书
				var name = $("name").value;
				var money = parseFloat($("money").value);
				if (name != "" && money > 0) {
					alert(money);
					var newtxt = name + "(" + money + ")";
					var newOpt = document.createElement("option");
					var newText = document.createTextNode(newtxt)
					newOpt.appendChild(newText);
					newOpt.value = $("money").value;
					$("booklist").appendChild(newOpt);
				} else {
					alert('请输入图书相关信息!!')
				}
			}
		</script>
	</head>
	<body>
		<div id="bookshop">
			<form method="post" action="">
				<table align="center">
					<caption>选购图书</caption>
					<tr>
						<td colspan="2">
							<div id="addBook">
								<fieldset>
									<legend align="center">输入图书信息</legend>
									<label>图书名称:</label><input type="text" id="name" required><br />
									<label>图书定价:</label><input type="text" id="money" required><br />
									<input type="button" id="butadd" value="新增图书" onclick="addBook();">
									<input type="reset" value="重置">
								</fieldset>
							</div>
						</td>
					</tr>
					<tr align="center">
						<td>图书备选区</td>
						<td>图书采购区</td>
					</tr>
					<tr>
						<td>
							<select name="" id="booklist" size="10">
								<option value="32" selected>计算机网络(32元)</option>
								<option value="58">数据结构(58元)</option>
								<option value="45">Java程序设计(45元)</option>
								<option value="49">Web前端开发技术(49元)</option>
								<option value="35">Web前端开发技术实验与实践(35元)</option>
								<option value="30">计算机组成原理(30元)</option>
								<option value="30">数据库开发技术(30元)</option>
							</select>
						</td>
						<td align="center">
							<select name="" id="selectedlist" size="10">
							</select>
						</td>
					</tr>
					<tr>
						<td colspan="2" align="center">
							<input type="button" value="单一选购" onclick="doOne();">
							<input type="button" value="单一退购" onclick="undoOne();">
							<input type="button" value="清空采购区" onclick="clearNone();">
							<input type="button" value="结帐" onclick="checkOut();">
						</td>
					</tr>
				</table>
			</form>
			<div id="note"></div>
		</div>
	</body>
</html>

三、简易轮播图设计

页面效果图:

简易轮播图显示初始页面
在这里插入图片描述

在左右箭头上盘旋时页面
在这里插入图片描述

在圆点上盘旋时页面
在这里插入图片描述

轮播图动态渲染效果页面
在这里插入图片描述

<!-- prj_12_3.html -->
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>自行设计轮播图</title>
		<style type="text/css">
			/*标题样式*/
			* {
				margin: 0;
				padding: 0;
			}

			p {
				text-align: center;
				font-size: 25px;
			}

			.imgBox {
				width: 700px;
				height: 320px;
				margin: 0 auto;
				position: relative;
				text-align: cneter;
				overflow: hidden;
			}

			.imgBox img {
				width: 700px;
				height: 320px;
				margin: 0 auto;

			}

			.box {
				list-style-type: none;
			}

			.img1 {
				display: block;
			}

			.img2,
			.img3,
			.img4,
			.img5 {
				display: none;
			}

			#prev {
				width: 95px;
				height: 95px;
				background: url(pro123/left-right.jpg) no-repeat 0px -80px;
				position: absolute;
				top: 115px;
				left: 0px;
				z-index: 1000;
				opacity: 0.2;
			}

			#next {
				width: 95px;
				height: 95px;
				background: url(pro123/left-right.jpg) no-repeat -165px -80px;
				position: absolute;
				top: 115px;
				right: 0px;
				z-index: 1000;
				opacity: 0.2;
			}

			#prev:hover,
			#next:hover {
				opacity: 0.7;
			}

			#circlebutton {
				position: absolute;
				bottom: 20px;
				left: 260px;
				list-style-type: none;
				text-align: center;
			}

			#circlebutton li {
				margin-left: 10px;
				float: left;
			}

			/* 设置圆点按钮样式,圆角边框 */
			#circlebutton li div {
				width: 20px;
				height: 20px;
				background: #DDDDDD;
				border-radius: 10px;
				cursor: pointer;
				text-align: center;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<p>简易轮播图设计</p>
		<div class="imgBox">
			<!-- 轮播图箭头事件处理 -->
			<div id="prev"></div>
			<div id="next"></div>
			<!-- 图像轮播区 -->
			<ul class="box">
				<li><img class="img-slide img1" src="pro123/s1.jpg" alt="1"> </li>
				<li><img class="img-slide img2" src="pro123/s2.jpg" alt="2"></li>
				<li><img class="img-slide img3" src="pro123/s3.jpg" alt="3"></li>
				<li><img class="img-slide img4" src="pro123/s4.jpg" alt="3"></li>
				<li><img class="img-slide img5" src="pro123/s5.jpg" alt="3"></li>
			</ul>
			<!-- 数字与图像同步切换 -->
			<ul id="circlebutton">
				<li>
					<div class="divEle" style="background: #FF0000;">1</div>
				</li>
				<li>
					<div class="divEle">2</div>
				</li>
				<li>
					<div class="divEle">3</div>
				</li>
				<li>
					<div class="divEle">4</div>
				</li>
				<li>
					<div class="divEle">5</div>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			var index = 0;
			// 获取页面上相关元素
			var divCon = document.getElementsByClassName("divEle"); //所有圆点
			var imgEle = document.getElementsByClassName("img-slide"); //所有图像
			var divPrev = document.getElementById("prev"); //左剪头
			var divNext = document.getElementById("next"); // 右箭头
			// 圆点上鼠标盘旋时,切换图像
			for (var i = 0; i < divCon.length; i++) {
				divCon[i].index = i;
				divCon[i].onmouseover = function() {
					if (index == this.index) {
						return;
					}
					index = this.index;
					changeImg();
					clearInterval(change1);
				}
			}
			// 自动轮播
			function autoChangeImg() {
				index++; //改变序号
				changeImg(); //改变当前序号的图像的display:block,其余为none
			}
			//设置定时器,每隔3秒切换一张图片
			var change1 = setInterval(autoChangeImg, 3000);
			// 设置每个图像的默认样式为不显示,将指定index序号的图像设置为block
			function changeImg() {
				if (index >= imgEle.length) {
					index = 0;
				}
				for (var i = 0; i < imgEle.length; i++) {
					imgEle[i].style.display = 'none';
					divCon[i].style.background = "#DDDDDD";
				}
				imgEle[index].style.display = 'block';
				divCon[index].style.background = "#FF0000";
			}

			// 左右剪头控制滚动      
			divPrev.onclick = function() {
				clearInterval(change1);
				if (index > 0) {
					index--
				} else {
					index = 4;
				}
				changeImg(); // 渲染指定的图像
			};
			divNext.onclick = function() {
				clearInterval(change1);
				if (index >= 4) {
					index = 0;
				} else {
					index++;
				}
				changeImg(); // 渲染指定的图像
			};
			// 左右剪头鼠标盘旋时,停止滚动
			divNext.onmouseover = function() {
				clearInterval(change1);
			}
			divPrev.onmouseover = function() {
				clearInterval(change1);
			}
			// 左右剪头鼠标移出时,恢复滚动
			divPrev.onmouseout = function() {
				change1 = setInterval(autoChangeImg, 3000);
			}
			divNext.onmouseout = function() {
				change1 = setInterval(autoChangeImg, 3000);
			}
		</script>
	</body>
</html>
<!-- pro_12_3_5.html -->
<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset=utf-8" />
		<title>js大图淡出淡现图片切换代码</title>
		<style>
			* {
        padding: 0px;
        margin: 0px;
      }

      #flash {
        width: 1200px;
        height: 535px;
        margin: 50px auto;
        position: relative;
      }

      #flash #play {
        width: 1200px;
        height: 535px;
        list-style: none;
        position: absolute;
        top: 0px;
        left: 0px;
      }

      #flash #play li {
        display: none;
        position: absolute;
        top: 0px;
        left: 0px;
      }

      #flash #play li img {
        float: left;
      }

      #button {
        position: absolute;
        bottom: 20px;
        left: 470px;
        list-style: none;
      }

      #button li {
        margin-left: 10px;
        float: left;
      }

      #button li div {
        width: 12px;
        height: 12px;
        background: #DDDDDD;
        border-radius: 6px;
        cursor: pointer;
      }

      #prev {
        width: 40px;
        height: 63px;
        background: url(images/beijing.png) 0px 0px;
        position: absolute;
        top: 205px;
        left: 10px;
        z-index: 1000;
      }

      #next {
        width: 40px;
        height: 63px;
        background: url(images/beijing.png) -40px 0px;
        position: absolute;
        top: 205px;
        right: 10px;
        z-index: 1000;
      }

      #prev:hover {
        background: url(images/beijing.png) 0px -62px;
      }

      #next:hover {
        background: url(images/beijing.png) -40px -62px;
      }
    </style>

		<script type="text/javascript" src="script.js"></script>
	</head>
	<body>
		<div id="flash">
			<div id="prev"></div>
			<div id="next"></div>
			<ul id="play">
				<li style="display: block;"><img src="pro123/1.jpg" alt="" /></li>
				<li><img src="pro123/2.jpg" alt="" /></li>
				<li><img src="pro123/3.jpg" alt="" /></li>
				<li><img src="pro123/4.jpg" alt="" /></li>
				<li><img src="pro123/5.jpg" alt="" /></li>
				<li><img src="pro123/6.jpg" alt="" /></li>
				<li><img src="pro123/7.jpg" alt="" /></li>
				<li><img src="pro123/8.jpg" alt="" /></li>
			</ul>
			<ul id="button">
				<li>
					<div style="background: #A10000;"></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
				<li>
					<div></div>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			// script.js
			window.onload = function() {
				var oPlay = document.getElementById('play');
				var aLi = oPlay.getElementsByTagName('li');
				var oButton = document.getElementById('button');
				var aDiv = oButton.getElementsByTagName('div');
				var oPrev = document.getElementById('prev');
				var oNext = document.getElementById('next');
				var oFlash = document.getElementById('flash');
				var now = 0;
				var timer2 = null;
				for (var i = 0; i < aDiv.length; i++) {
					aDiv[i].index = i;
					aDiv[i].onmouseover = function() {
						if (now == this.index) return;
						now = this.index;
						tab();
					}
				}
				oPrev.onclick = function() {
					now--;
					if (now == -1) {
						now = aDiv.length - 1;
					}
					tab();
				}
				oNext.onclick = function() {
					now++;
					if (now == aDiv.length) {
						now = 0;
					}
					tab();
				}
				oFlash.onmouseover = function() {
					clearInterval(timer2);
				}
				oFlash.onmouseout = function() {
					timer2 = setInterval(oNext.onclick, 4000);
				}
				timer2 = setInterval(oNext.onclick, 5000);

				function tab() {
					for (var i = 0; i < aLi.length; i++) {
						aLi[i].style.display = 'none';
					}
					for (var i = 0; i < aDiv.length; i++) {
						aDiv[i].style.background = "#DDDDDD";
					}
					aDiv[now].style.background = '#A10000';
					aLi[now].style.display = 'block';
					aLi[now].style.opacity = 0;
					aLi[now].style.filter = "alpha(opacity=0)";
					jianbian(aLi[now]);
				}

				function jianbian(obj) {
					var alpha = 0;
					clearInterval(timer);
					var timer = setInterval(function() {
						alpha++;
						obj.style.opacity = alpha / 100;
						obj.style.filter = "alpha(opacity=" + alpha + ")";
						if (alpha == 100) {
							clearInterval(timer);
						}
					}, 10);
				}
			}
		</script>
	</body>
</html>

四、列表框图像浏览器

页面效果图:

列表框图像浏览器初始页面
在这里插入图片描述

设置比例150%时图像显示页面
在这里插入图片描述

设置比例50%时图像显示页面
在这里插入图片描述

<!-- prj_12_4.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>列表框图像浏览器</title>
		<style type="text/css">
			#div0 {
				text-align: center;
				margin: 0 auto;
				border: 1px solid #020202;
				padding: 20px;
				width: 650px;
			}

			#left,
			#right {
				margin: 10px 10px;
				text-align: center;
				display: inline-block;
				vertical-align: middle;
			}

			#left {
				width: 120px;
			}

			/* 定义图像显示大小的系列类样式 */
			.img-3 {
				width: 150px;
			}

			/* 缩小50%显示 */
			.img-2 {
				width: 300px;
			}

			/* 原倍数显示 */
			.img-1 {
				width: 450px;
			}

			/* 放大150%显示 */
		</style>
		<script type="text/javascript">
			// 通过ID获取页面元素
			function $(id) {
				return document.getElementById(id);
			}
			// 动态形成图像文件名并修改图像标记的src
			function showImg(oSel) {
				var str = oSel.value;
				if (str != "") {
					$("pic").src = str;
				}
			}
			// 标记动态添加类属性
			function addClass(className) {
				$("pic").className = className;
			}
		</script>
	</head>
	<body>
		<div id="div0">
			<div id="left" class="">
				<h3>图像浏览</h3>
				<hr color="#006600">
				<h4>显示比例:</h4>
				<input type="radio" name="scale" onclick="addClass('img-1')" />150%<br>
				<input type="radio" name="scale" checked onclick="addClass('img-2')" />100%<br>
				<input type="radio" name="scale" onclick="addClass('img-3')" />50%<br>
				<h4>图像浏览器</h4>
				<select id="sel" onchange="showImg(this)">
					<option value="" disabled="disabled">选择图像</option>
					<option value="pro124/img1.jpg" selected>都市树木1</option>
					<option value="pro124/img2.jpg">卡通图片2</option>
					<option value="pro124/img3.jpg">卡通图片3</option>
				</select>
			</div>
			<div id="right">
				<p><img id="pic" src="pro124/img1.jpg" /></p>
			</div>
		</div>
	</body>
</html>

五、课外拓展训练


拓展1

项目:双色球游戏规则

双色球由中福彩中心发行和组织销售,由各省福彩机构在所辖区域内销售。采用计算机网络系统发行,在各省福彩机构设置的销售网点销售,每周二、周四、周日开奖。
双色球投注区分为红色球号码区和蓝色球号码区,红色球号码区由1-33共三十三个号码组成,蓝色球号码区由1-16共十六个号码组成。投注时选择6个红色球号码和1个蓝色球号码组成一注进行单式投注,每注金额人民币2元。

购买者可在各省福彩机构设置的销售网点投注。投注号码经投注机打印出对奖凭证,交购买者保存,此对奖凭证即为双色球彩票。 除单式投注外,购买者还可选择复式投注、胆拖投注的玩法。

页面效果图:

双色球投注程序初始页面
在这里插入图片描述

双色球投注时效果页面
在这里插入图片描述

<!-- project_12_1.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>中国福彩双色球投注程序</title>
		<style type="text/css">
			* {
				font-size: 20px;
			}

			p {
				text-indent: 2em;
			}

			div {
				padding: 20px;
				width: 820px;
				height: 700px;
				margin: 0px auto;
				border: 2px solid #ff3300;
				background: url(kwtz121/logo-top.png) no-repeat top right
			}

			td {
				text-align: center;
			}

			span {
				padding: 10px;
				width: 40px;
				height: 40px;
				color: white;
				border-radius: 25px;
				margin: 0px 15px;
				font-size: 22px;
			}

			#redArea {
				width: 300px;
				height: 60px;
			}

			#redArea span {
				background: red;
			}

			#blueArea span {
				background: blue;
			}

			#blueArea {
				width: 60px;
				height: 60px;
			}
		</style>
		<script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}

			function createRed() {
				// 红色球号码区由1-33共三十三个号码组成,33选6个红色球号码 
				var redArea = new Array(); // 保存红区号码的数组
				var number33 = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
					'16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33'); // 红区候选号码的数组
				var htmlStr = ""; // 输出红底白字的数字
				for (var i = 0; i < 6; i++) {
					var index = Math.floor(Math.random() * number33.length);
					redArea[i] = number33[index];
					number33.splice(index, 1);
				}
				for (var i = 0; i < 6; i++) {
					htmlStr += "<span>" + redArea[i] + "</span>";
				}
				$("redArea").innerHTML = htmlStr;
			}

			function createBlue() {
				// 蓝色球号码区由1-16共十六个号码组成,16选1个蓝色球号 
				var blueArea = new Array(); // 保存蓝区号码的数组
				var number16 = new Array('01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
					'16'); // 蓝区候选号码的数组
				blueArea[0] = number16[Math.floor(Math.random() * number16.length)];
				$("blueArea").innerHTML = "<span>" + blueArea.join() + "</span>";
			}

			function clearArea() {
				$("blueArea").innerHTML = "";
				$("redArea").innerHTML = "";
			}
		</script>
	</head>
	<body>
		<div id="" class=""> <img src="kwtz121/dublecolor.png" border="0" alt="">
			<h3>游戏规则</h3>
			<p>双色球由中福彩中心发行和组织销售,由各省福彩机构在所辖区域内销售。采用计算机网络系统发行,在各省福彩机构设置的销售网点销售,每周二、周四、周日开奖。</p>
			<p> 双色球投注区分为红色球号码区和蓝色球号码区,红色球号码区由1-33共三十三个号码组成,蓝色球号码区由1-16共十六个号码组成。投注时选择6个红色球号码和1个蓝色球号码组成一注进行单式投注,每注金额人民币2元。 </p>
			<p> 购买者可在各省福彩机构设置的销售网点投注。投注号码经投注机打印出对奖凭证,交购买者保存,此对奖凭证即为双色球彩票。 除单式投注外,购买者还可选择复式投注、胆拖投注的玩法。 </p>
			<table border="1" cellspacing="0" cellpadding="0" align="center" width="700px" height="200px">
				<tr>
					<th>红色球号码区</th>
					<th>蓝色球号码区</th>
				</tr>
				<tr height="70px">
					<td width="490px">
						<strong id="redArea"></strong>
					</td>
					<td width="180px">
						<strong id="blueArea"></strong>
					</td>
				</tr>
				<tr>
					<td><input type="button" value="启动红色摇奖器具" onclick="createRed()" /></td>
					<td><input type="button" value="启动蓝色摇奖器具" onclick="createBlue()" /></td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="button" value="清空器具" onclick="clearArea()" />
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

拓展2

项目:志愿填报

  1. 备选专业目录

计算机科学与技术
软件工程
大数据科学与技术
机械制造与自动化
电子信息工程
电气工程及自动化
财务管理
审计学
经济与金融
审计学

  1. 页面效果图

志愿填报初始页面
在这里插入图片描述

志愿填报页面
在这里插入图片描述

填报志愿输出页面
在这里插入图片描述

填报志愿清空页面
在这里插入图片描述

<!-- project_12_2.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>志愿填报</title>
		<style type="text/css">
			#container {
				margin: 0 auto;
				width: 750px;
				height: 500px;
				border: 2px double #666666;
			}

			p,
			h3 {
				text-align: center;
			}

			#mySelected {
				width: 300px;
				height: 240px;
				border: 1px dashed #AAAAAA;
			}

			ul {
				list-style-type: none;
			}

			#selectArea,
			#selectedArea {
				display: inline-block;
				width: 350px;
				height: 300px;
				vertical-align: top;
			}

			#options {
				display: block;
				padding: 5px 50px;
				text-align: center;
				width: 600px;
				height: 40px;
				font-weight: bold;
			}
		</style>
		<script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}
			// 从左边复选框中选择专业,打勾后添加右边列表框,去勾后从列表框中删除。
			// 超过6个专业不允许添加
			function doSelected(numStr) {
				// 只要单击复选框就清空选项显示区域
				$("options").innerHTML = "";
				var selectlength = $("mySelected").length;
				if (selectlength >= 6) {
					alert("已经达到上限值,不可以再次添加,但可以修改!!");
					$("chk" + numStr).checked = false;
					delOptions(numStr); // 删除列表框国的选项         
				} else {
					if ($("chk" + numStr).checked == true) {
						// 单击某一复选框时将专业名称添加到右边的列表框中, 同时记录序号,便于删除
						var op1 = document.createElement('option'); // 创建option标记          
						var txt1 = document.createTextNode($("chk" + numStr).value);
						op1.value = numStr;
						op1.appendChild(txt1);
						$("mySelected").appendChild(op1);
					} else {
						// 已经打勾,再次单击时去勾时删除选项
						delOptions(numStr)
					}
				}
			}

			function delOptions(numStr) {
				for (var i = 0; i < $("mySelected").length; i++) {
					if ($("mySelected").options[i].value == numStr) {
						$("mySelected").removeChild($("mySelected").options[i]);
					}
				}
			}
			// 输出所有专业选项
			function getOptions() {
				var mysel = $("mySelected");
				var Op_txt = "";
				for (var i = 0; i < mysel.length; i++) {
					Op_txt = Op_txt + "&nbsp;&nbsp;" + mysel.options[i].text;
				}
				// 写入到id为options的div中
				$("options").innerHTML = "所选专业为:" + Op_txt;
			}

			function clearAll() {
				$("options").innerHTML = "";
				$("mySelected").innerHTML = "";
				// 将所有复选框清空
				var chkboxs = document.getElementsByTagName("input");
				for (var i = 1; i < chkboxs.length; i++) {
					if (chkboxs[i].type == "checkbox") {
						chkboxs[i].checked = false;
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="container">
			<h3>志愿填报</h3>
			<hr color="black">
			<p>
				<input type="button" value="输出所选专业" onclick="getOptions()" />
				<input type="button" value="清空" onclick="clearAll()" />
			</p>
			<div id="selectArea">
				<h3>备选专业目录</h3>
				<ul>
					<li><input id="chk1" type="checkbox" onclick="doSelected('1')" value="计算机科学与技术">计算机科学与技术</li>
					<li><input id="chk2" type="checkbox" onclick="doSelected('2')" value="软件工程">软件工程</li>
					<li><input id="chk3" type="checkbox" onclick="doSelected('3')" value="大数据科学与技术">大数据科学与技术</li>
					<li><input id="chk4" type="checkbox" onclick="doSelected('4')" value="机械制造与自动化">机械制造与自动化</li>
					<li><input id="chk5" type="checkbox" onclick="doSelected('5')" value="电子信息工程">电子信息工程</li>
					<li><input id="chk6" type="checkbox" onclick="doSelected('6')" value="电气工程及自动化">电气工程及自动化</li>
					<li><input id="chk7" type="checkbox" onclick="doSelected('7')" value="财务管理">财务管理</li>
					<li><input id="chk8" type="checkbox" onclick="doSelected('8')" value="审计学">审计学</li>
					<li><input id="chk9" type="checkbox" onclick="doSelected('9')" value="经济与金融">经济与金融</li>
					<li><input id="chk10" type="checkbox" onclick="doSelected('10')" value="审计学">审计学</li>
				</ul>
			</div>
			<div id="selectedArea">
				<h3>已选专业清单</h3>
				<select name="mySelected" id="mySelected" size='8'>
				</select><br>
			</div>
			<hr color="black">
			<div id="options">
			</div>
		</div>
	</body>
</html>

作者主页: 正函数的个人主页
文章收录专栏: Web design
在这里插入图片描述

在这里插入图片描述

欢迎大家点赞 👍 收藏 ⭐ 加关注哦!
如果你认为这篇文章对你有帮助,请给正函数点个赞吧,如果发现什么问题,欢迎评论区留言!!

  • 20
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

.正函数.

你的鼓励是我创作制作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值