Web前端开发技术实验与实践（第3版）储久良编著实训12

CJ020401

已于 2022-11-17 15:00:49 修改

阅读量2k

点赞数

分类专栏： web前端文章标签： css javascript 前端

于 2022-11-16 15:39:03 首次发布

本文链接：https://blog.csdn.net/j011025/article/details/127886330

版权

web前端专栏收录该内容

1 篇文章 1 订阅

订阅专栏

项目34 设计简易福彩投注程序

代码如下：

<!--prj_12_1.html-->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>简易福彩投注程序</title>
  <style type="text/css">
	div{margin:0px auto;
	    background-color:#00ff99;
		width:450px;
		height:260px;
		border:2px solid #ff3300;
		color:white;}
	h2{font-size:28px;
	   text-align:center;}
	td{font-weight:bold;
	   font-size:18px;}
  </style>
  <script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}
			function selectnumber(num){
				var number=new Array();
				for(i=0;i<=7;i++)
				{
					tmp=Math.floor(Math.random()*30+1);
					for(var j=0;j<=number.length-1;j++)
					{
						if(tmp==number[j])
						{
							tmp=Math.floor(Math.random()*30+1);
							j=0;
						}
					}
					number[j]=tmp;
			    }
				$(num).value=number.sort().join(" ");
			} 
  </script>
 </head>
 <body>
  <div id="">
	<img src="D:/ico_7l.gif">
	<form action="" method="" name="">
	  <h2>福利彩票投注助手</h2>
	  <table align="center">
		<tr>
			<td id="td1">彩票号码</td>
			<td id="td2">
				<input type="text" id="number1" size="28" readonly>
			</td>
			<td>
				<input type="button" value="投注" onclick="selectnumber('number1')">
			</td>
			<td rowspan="3">
				<input type="reset" value="清空">
			</td>
		</tr>
		<tr>
			<td id="td1">彩票号码</td>
			<td id="td2">
				<input type="text" id="number2" size="28" readonly>
			</td>
			<td>
				<input type="button" value="投注" onclick="selectnumber('number2')">
			</td>
		</tr>
		<tr>
			<td id="td1">彩票号码</td>
			<td id="td2">
				<input type="text" id="number3" size="28" readonly>
			</td>
			<td>
				<input type="button" value="投注" onclick="selectnumber('number3')">
			</td>
		</tr>
	  </table>
	</form>
  </div>
 </body>
</html>

项目35 设计江苏福彩投注站彩票投注助手

代码如下：

<!--prj_12_1.html-->
<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>福彩投注站投助彩票助手</title>
  <style type="text/css">
    select{width:300px;
	       height:145px;}
	div{background:url("D:/fc_logo.jpg") right top no-repeat;
		margin:0px auto;
		width:550px;
		height:320px;
		border:2px solid #0077bb;
		color:white;}
	h2{font-size:28px;
	   text-align:center;
	   padding:10px auto;}
	input{width:80px;
	      height:40px;}
  </style>
  <script type="text/javascript">
			function $(id) {
				return document.getElementById(id);
			}
			function selectNumber(n){
				var number=new Array();
				var objsel=$("number8");
				var selnum=objsel.options.length;
				for(j=0;j<=n-1;j++)
				{
					var list="";
					for(i=0;i<=7;i++)
					{
						var tmp=Math.floor(Math.random()*30+1);
						if(tmp<10)
						{
							tmp="0"+tmp;
						}
						for(var k=0;k<=number.length-1;k++)
						{
							if(tmp==number[k])
							{
								tmp=Math.floor(Math.random()*30+1);
								if(tmp<10){tmp="0"+tmp;}
								k=0;
							}
						}
						number[i]=tmp;
					}
					list=number.join(" ");
					var opt=document.createElement("option");
					var opt_text=document.createTextNode(list);
					opt.value=j;
					opt.appendChild(opt_text);
					objsel.appendChild(opt);		
			    }
				objsel.selectedIndex=selnum;
			} 
			function delSelect(){
				var objSelect=$("number8");
				var strIndex=objSelect.selectedIndex;
				if(strIndex!=-1)
				{
					objSelect.options.remove(strIndex);
				}
				else
				{
					alert("请先选择列表框后再删除！");
				}
		    } 
			function delSelectAll(){
			    var objSelect=$("number8");
				var strIndex=objSelect.options.length;
				if(objSelect.length>0)
				{
					for(i=0;i<=strIndex-1;i++)
					{objSelect.options.remove(0);}
				}
				else
				{
					alert("列表框已空,不能再删除！");
				}
			}
  </script>
 </head>
 <body>
  <div id="">
	<img src="D:/ico_7l.gif">
	<form action="" method="post" name="myform" submit="">
	  <h2>福彩投注站投助彩票助手</h2>
	  <table align="center">
		<tr>
			<td id="td1">
				<input type="button" value="机选1注" onclick="selectNumber(1);">
			</td>
			<td rowspan="3">
				<select id="number8" name="number8" size="5" ></select>
			</td>
			<td>
				<input type="button" value="删除" onclick="delSelect();">
			</td>
		</tr>
		<tr>
			<td id="td1">
				<input type="button" value="机选5注" onclick="selectNumber(5);">
			</td>
            <td>
                &nbsp;
            </td>
		</tr>
		<tr>
			<td id="td1">
				<input type="button" value="机选10注" onclick="selectNumber(10);">
			</td>
			<td>
				<input type="button" value="全部删除" onclick="delSelectAll();">
			</td>
		</tr>
	  </table>
	</form>
  </div>
 </body>
</html>