由于页面内容很多本人不一一去展示
接下来将代码写在下面
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>电商平台网站</title> </head> <!--导入css文件--> <link rel="stylesheet" type="text/css" href="css/AAAA.css"/> <body> <article> <div id="top"> <ul class="topList"> <li><a href="注册页面.html">注册页面</a></li> <li><a href="index.html">电商页面</a></li> <li><a href="tableA.html">tableA课表</a></li> <li><a href="tableB.html">tableB课表</a></li> <li><a href="tableC.html">tableC课表</a></li> </ul> </div> </article> <hr> <h1 style="color: red; background: black; align-content: center;text-align: center;">电商平台网站的制作</h1> <div id="top" class="brand"> 电商网 <input type="search" placeholder="搜索"/> </div> <hr> <div class="content"> <div class="pic-info"> <div class="pic-box"> <img src="img/w1 (4).jpg" /> </div> <ul> <li>商品名称:BELL</li> <li>商品价格:4000￥</li> <li>交易数量:123</li> </ul> </div> </div> <div class="content"> <div class="pic-info"> <div class="pic-box"> <img src="img/w1 (5).jpg" /> </div> <ul> <li>商品名称:http</li> <li>商品价格:5000</li> <li>交易数量:34</li> </ul> </div> </div> <div class="content"> <div class="pic-info"> <div class="pic-box"> <img src="img/w1 (6).jpg" /> </div> <ul> <li>商品名称:华为</li> <li>商品价格:6000</li> <li>交易数量:12000</li> </ul> </div> </div> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片头像</title> <style type="text/css"> .asd{ width: 50px; height:50px; padding: 3px; border: 5px; background: lightskyblue; border: dotted;*/ /*border: dashed cornflowerblue;*/ /*border: dotted cyan;*/ } </style> </head> <body> <table border="2" class="qw" datafld="300"> <tr> <td colspan="2"><img src="img/bnm/cc1 (1).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (2).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (3).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (4).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (5).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (6).jpg" class="asd"></td> </tr> <tr> <td colspan="2"><img src="img/bnm/cc1 (7).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (8).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (9).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (10).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (11).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (12).jpg" class="asd"></td> </tr> <tr> <td colspan="2"><img src="img/bnm/cc1 (13).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (14).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (15).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (16).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (17).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (18).jpg" class="asd"></td> </tr> <tr> <td colspan="2"><img src="img/bnm/cc1 (19).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (20).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (21).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (22).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (23).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (24).jpg" class="asd"></td> </tr> <tr> <td colspan="2"><img src="img/bnm/cc1 (25).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (26).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (27).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (28).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (29).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (30).jpg" class="asd"></td> </tr> <tr> <td colspan="2"><img src="img/bnm/cc1 (31).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (32).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (33).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (34).jpg" class="asd"></td> <td colspan="2"><img src="img/bnm/cc1 (35).jpg" class="asd"></td> <td colspan="2"><img src="img/A/kp1 (5).jpg" class="asd"></td> </tr> </table> <table border="4" class="qw"> <tr> <td class="asd"><img src="img/A/kp1 (1).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (2).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (3).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (4).jpg" class="asd"></td> </tr> <tr> <td class="asd"><img src="img/A/kp1 (5).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (6).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (7).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (8).jpg" class="asd"></td> </tr> <tr> <td class="asd"><img src="img/A/kp1 (9).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (10).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (11).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (12).jpg" class="asd"></td> </tr> <tr> <td class="asd"><img src="img/A/kp1 (13).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (14).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (15).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (16).jpg" class="asd"></td> </tr> </table> <a href="s2.html"><h1>ok1</h1></a> <a href="S3.html"><h1>ok2</h1></a> <a href="Table1.html"><h1>ok3</h1></a> <a href="TableA.html"><h1>ok4</h1></a> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <style> table{ width:600px; text-align:center; } th{; color:#FFF; padding:5px; } td{ ; border-bottom:1px dashed #817865; } caption{ font-size: 40px; color: red; } </style> </head> <body> <table id="list" border="0" bgcolor="silver"> <caption><h4>我的购物车</h4></caption><br /> <tr> <th bgcolor="crimson"><label><input id="all" type="checkbox" onclick="all_check()" />全选</label></th> <th bgcolor="#817865">商品</th> <th bgcolor="antiquewhite">描述</th> <th bgcolor="darkturquoise">单价（元）</th> <th bgcolor="deepskyblue">数量</th> <th bgcolor="#00A40C"> 评价</th> <th bgcolor="aliceblue">购买者电话</th> <th bgcolor="orangered">删除键</th> </tr> <tr> <tr> <td background="img/3.jpg"><input name="ic" type="checkbox" onclick="single_check()" /></td> <td><img src="img/3.jpg"></td> <td width="170" align="left">棉麻上衣</td> <td>268</td> <td>2</td> <td>五颗星</td> <td bgcolor="aquamarine">18137567889</td> <td bgcolor="#817865"> <input type="button" value=" 删除" onclick="removeRow1()"></td> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" value="234"/></td> <td width="80"><img src="img/1.jpg"></td> <td width="170" align="left"><a>春长袖裙套装长裙</a></td> <td bgcolor="darkslateblue">699</td> <td>1</td> <td>五颗星</td> <td>18134567889</td> <td bgcolor="#817865"> <input type="button" value=" 删除" onclick="removeRow1()"></td> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" /></td> <td><img src="img/2.jpg"></td> <td width="170" align="left">新款女装收腰长裙</td> <td>399</td> <td bgcolor="fuchsia">1</td> <td>五颗星</td> <td bgcolor="lightblue">18134567889</td> <td bgcolor="#817865"> <input type="button" value=" 删除" onclick="removeRow1()"></td> </tr> <tr><td colspan="4" style="text-align:left; font-weight:bold; padding-left:15px;"><a href=javascript:removeRow();>删除选中的商品 </a></td><td><button id="tj"> 提交订单</button></td> </tr> </table> <script> //全选 function all_check() { var oInput= document.getElementsByName("ic"); for(i=0;i<oInput.length;i++) if(document.getElementById("all").checked==true) { oInput[i].checked=true; // alert(oInput[i].value); } else oInput[i].checked=false; } //多选 function single_check() { var oInput= document.getElementsByName("ic"); var j=0; for(i=0;i<oInput.length;i++) if(oInput[i].checked==true) j++; if( j==oInput.length) document.getElementById("all").checked=true; else document.getElementById("all").checked=false; } //删除 function removeRow(){ var cheObj=document.getElementsByName("ic"); var taObj=document.getElementById("list"); if(confirm("确定要删除么？")) for(var k=0;k<cheObj.length;k++){ if(cheObj[k].checked){ taObj.deleteRow(k+1); k=-1; } } document.getElementById("all").checked=false; } var taObj=document.getElementById("list"); for(var k=0;k<taObj.rows.length;k++){ taObj.rows[k].onmouseover=function (){ this.style.backgroundColor="silver"; } taObj.rows[k].onmouseout=function (){ this.style.backgroundColor="#ddd"; } } function removeRow1(){ var cheObj=document.getElementsByName("ic"); var taObj=document.getElementById("list"); if(confirm("确定要删除么？")) for(var k=0;k<cheObj.length;k++){ if(cheObj[k].checked){ taObj.deleteRow(k+1); k=-1; } } document.getElementById("all").checked=false; } </script> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="demo" onclick="myFuction()"></div> <script type="text/javascript"> function myFuction(){ var x; person=prompt("请输入名字","小明"); if(person!=null &&person!="") x="你好"+person+",今天这样行吗？"; document.getElementById("demo").innerHTML=x; } myFuction(); </script> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> 圆的面积</title> <style type="text/css"> .n{ font-family: "微软雅黑"; font-size: 34px; } .box1{ color: #F08080; background: #777777; } .box2{ color: #00A40C; background: #1E90FF; } .box3{ color: coral; background: darkorange; } </style> </head> <body> <div class="box1"> <p class="n">圆的面积与周长</p> <label for="radius">圆的r</label> <input type="text" id="redius"/> </div> <div class="box2"> <label for="perimeter">圆的周长</label> <input type="text" id="perimeter"/> </div> <div class="box3"> <table> <label for="area">圆的面积</label> <input type="text" id="area"/> </table> </div> <script> let radius =document.getElementById("redius"), perimeter=document.getElementById("perimeter"), area=document.getElementById("area"); radius.oninput=function(){ let r=radius.value; let res_perimeter=Math.PI*2*r; let res_area=Math.PI*Math.pow(r,2); if(r=='0'){ perimeter.value='0'; area.value='0'; }else{ perimeter.value=res_perimeter.toString().substr(0,4).concat('0'); area.value=res_area.toString().substr(0,4).concat('0'); } } </script> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>国庆节</title> </head> <body> <h1 id="res"></h1> <script type="text/javascript"> function test(year,month,day){ var end =new Date(year,month-1,day); var leftTime=end.getTime()-Date.now(); var day =Math.floor(leftTime/1000/60/60/24); var h =Math.floor(leftTime/1000/60/60%24); var m =Math.floor(leftTime/1000/60%60); var s =Math.floor(leftTime/1000/60); var str="距国庆节还有"+day+"天"+h+"小时"+m+"分钟"+s+"秒"; res.innerHTML=str } setInterval("test(2021,10,1)",1000); </script> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>体脂率计算器</title> <style type="text/css"> .text,select { width: 330px; height: 42px; line-height: 42px; padding: 0 10px; color: #777777; font-size: 16px; font-weight: bold; margin: 6px; } select { width: 355px; } h2{text-align: center;color: #6699cc;} h2,h3{ font-weight: 900; font-family: "黑体"; } #info{ width: 390px; height: 390px; padding: 10px; border: 1px solid #e5e5e5; background: #f8f8f8; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; box-shadow: 0px 0px 10px #f2f2f2; -moz-box-shadow: 0px 0px 10px #f2f2f2; -webkit-box-shadow: 0px 0px 10px #f2f2f2; margin: 0px auto; } .btn { color: #FFFFFF; font-size: 16px; font-weight: bold; width: 360px; height: 45px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background-color: darkorchid; } </style> </head> <body> <div id="info"> <h2>体脂率计算器</h2> <h3>填写个人信息</h3> <form method="post" name="frm1" method="post" action="javascript:alert('提交成功！');"> <select id="mySelect"> <option>性别 </option> <option value="男">男 </option> <option value="女">女</option> </select> <input id="contact" name="contact" type="text" class="text" value="年龄"/>岁<br> <input id="name" name="name" type="text" class="text" value="体重" />kg<br> <input id="name" name="name" type="text" class="text" value="身高" />cm<br> <button class="btn">计 算</button> </form> </div> <script language="javascript"> window.onload = function() { var inName = document.getElementsByTagName("input"); for(i = 0; i < inName.length; i++) { inName[i].onmouseover = function() { this.focus(); }; inName[i].onfocus = function() { this.select(); }; } } </script> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <style> table{ width:600px; /* 表格边框 border:1 solid #007108;*/ /* 边框重叠 border-collapse:collapse;*/ background-color: #d9ffdc;/* 表格背景色 padding:5px;*/ text-align:center; } th{background-color:#00a40c; /* 行名称背景色 */ color:#FFF;/* 行名称文字颜色 border-color:#030;*/ padding:5px; } td{ border-bottom:1px dashed #817865; } </style> </head> <body> <table id="list" border="0"> <caption><h2>我的购物车</h2></caption> <tr> <th><label><input id="all" type="checkbox" onclick="all_check()" />全选</label></th> <th>商品</th> <th>描述</th> <th>单价（元）</th> <th>数量</th> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" value="234"/></td> <td width="80"><img src="img/1.jpg"></td> <td width="170" align="left"><a>新款春装韩版长款两件套连衣裙女名媛欧根纱长袖裙套装长裙</a></td> <td>699</td> <td>1</td> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" /></td> <td><img src="img/2.jpg"></td> <td width="170" align="left">新款女装夏修身高腰长款连衣裙女雪纺短袖裙名媛粉色收腰长裙</td> <td>399</td> <td>1</td> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" /></td> <td><img src="img/3.jpg"></td> <td width="170" align="left">新款棉麻衬衫女短袖白色衬衣亚麻纯色百搭宽松上衣</td> <td>268</td> <td>2</td> </tr> <tr><td colspan="4" style="text-align:left; font-weight:bold; padding-left:15px;"><a href=javascript:removeRow();>删除选中的商品 </a></td><td><button id="tj"> 提交订单</button></td> </tr> </table> <script> function all_check() { var oInput= document.getElementsByName("ic"); for(i=0;i<oInput.length;i++) if(document.getElementById("all").checked==true) { oInput[i].checked=true; // alert(oInput[i].value); } else oInput[i].checked=false; } function single_check() { var oInput= document.getElementsByName("ic"); var j=0; for(i=0;i<oInput.length;i++) if(oInput[i].checked==true) j++; if( j==oInput.length) document.getElementById("all").checked=true; else document.getElementById("all").checked=false; } function removeRow(){ var cheObj=document.getElementsByName("ic"); var taObj=document.getElementById("list"); if(confirm("确定要删除么？")) for(var k=0;k<cheObj.length;k++){ if(cheObj[k].checked){ taObj.deleteRow(k+1); k=-1; } } document.getElementById("all").checked=false; } var taObj=document.getElementById("list"); for(var k=0;k<taObj.rows.length;k++){ taObj.rows[k].onmouseover=function (){ this.style.backgroundColor="#ddd"; } taObj.rows[k].onmouseout=function (){ this.style.backgroundColor="#d9ffdc"; } } </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片头像</title> <style type="text/css"> .asd{ width: 100px; height:100px; padding: 3px; border: 5px; background: lightcoral; /*border: dotted;*/ /*border: dashed cornflowerblue;*/ border: dotted lightcoral; } </style> </head> <body> <table border="as"> <tr> <td class="asd"><img src="img/A/kp1 (1).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (2).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (3).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (4).jpg" class="asd"></td> </tr> <tr> <td class="asd"><img src="img/A/kp1 (5).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (6).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (7).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (8).jpg" class="asd"></td> </tr> <tr> <td class="asd"><img src="img/A/kp1 (9).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (10).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (11).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (12).jpg" class="asd"></td> </tr> <tr> <td class="asd"><img src="img/A/kp1 (13).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (14).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (15).jpg" class="asd"></td> <td class="asd"><img src="img/A/kp1 (16).jpg" class="asd"></td> </tr> </table> <a href="s2.html"><h1>ok1</h1></a> <a href="S3.html"><h1>ok2</h1></a> <a href="Table1.html"><h1>ok3</h1></a> <a href="TableA.html"><h1>ok4</h1></a> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>电商平台网站</title> </head> <!--导入css文件--> <link rel="stylesheet" type="text/css" href="css/AAAA.css"/> <body> <article> <div id="top"> <ul class="topList"> <li><a href="注册页面.html">注册页面</a></li> <li><a href="index.html">电商页面</a></li> <li><a href="tableA.html">tableA课表</a></li> <li><a href="tableB.html">tableB课表</a></li> <li><a href="tableC.html">tableC课表</a></li> </ul> </div> </article> <hr> <h1 style="color: red; background: black; align-content: center;text-align: center;">电商平台网站的制作</h1> <div id="top" class="brand"> 电商网 <input type="search" placeholder="搜索"/> </div> <hr> <div class="content"> <div class="pic-info"> <div class="pic-box"> <img src="img/w1 (4).jpg" /> </div> <ul> <li>商品名称:BELL</li> <li>商品价格:4000￥</li> <li>交易数量:123</li> </ul> </div> </div> <div class="content"> <div class="pic-info"> <div class="pic-box"> <img src="img/w1 (5).jpg" /> </div> <ul> <li>商品名称:http</li> <li>商品价格:5000</li> <li>交易数量:34</li> </ul> </div> </div> <div class="content"> <div class="pic-info"> <div class="pic-box"> <img src="img/w1 (6).jpg" /> </div> <ul> <li>商品名称:华为</li> <li>商品价格:6000</li> <li>交易数量:12000</li> </ul> </div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery随机抽中手机号码抽奖代码</title> <link rel="stylesheet" href="css/抽奖活动.css" /> </head> <body> <div class="container"> <div class="left"> <h2>抽奖活动</h2> <select class="level"> <option value="3">三等奖</option> <option value="2">二等奖</option> <option value="1">一等奖</option> </select> <div class="result-box">150****0000</div> <button class="start" onClick="start()">开始抽奖</button> </div> <div class="list"></div> </div> <script type="text/javascript" src="js/jquery-3.6.js"></script> <script type="text/javascript"> var data = [02161606967, 13020266595, 13062886092, 13120856800, 13166203899, 13222286768, 13260155466, 13311859605, 13321953155, 13386035991, 13386279355, 13391041349, 13402005209, 13501955354, 13524377621, 13566884393, 13585583394, 13601652353, 13601750621, 13601957822, 13611717363, 13611808088, 13621842513, 13636608228, 13651744987, 13671548893, 13671715448, 13671743121, 13671938567, 13701612351, 13770050005, 13774415457, 13774468122, 13795220723, 13816648396, 13817074750, 13817603172, 13817864803, 13818156777, 13818478999, 13818608945, 13818676915, 13818708665, 13870620815, 13901647848, 13901757122, 13901765884, 13916054638, 13916130704, 13916230340, 13916320794, 13917046040, 13917082161, 13917376187, 13917519790, 13917822024, 13918015694, 15000239160, 15000858139, 15000863267, 15001966112, 15021654427, 15026688058, 15162775605, 15201931885, 15262790618, 15366970333, 15692116261, 15800762285, 15801777839, 15836932000, 15900711818, 15901868745, 15921081152, 15921913369, 17721460897, 18017628227, 18202119713, 18502746988, 18516214869, 18521502523, 18521531099, 18606387979, 18616988816, 18621373309, 18621607551, 18621768758, 18621831973, 18621939488, 18817373997, 18817619376, 18818010115, 18857881532, 18901731168, 18910877917, 18916172890, 18918588802, 18930362020, 18939786089, 15001963100, 15001963101, 15001963102, 15001963103, 15001963104, 15001963105, 15001963106, 15001963107, 15001963108, 15001963109, 15001963110, 15001963111, 15001963112, 15001963113, 15001963114, 15001963115, 15001963116, 15001963117, 15001963118, 15001963119, 15001963120, 15001963121, 15001963122, 15001963123, 15001963124, 15001963125, 15001963126, 15001963127, 15001963128, 15001963129, 15001963130, 15001963131, 15001963132, 15001963133, 15001963134, 15001963135, 15001963136, 15001963137, 15001963138, 15001963139, 15001963140, 15001963141, 15001963142, 15001963143, 15001963144, 15001963145, 15001963146, 15001963147, 15001963148, 15001963149, 15001963150, 15001963151, 15001963152, 15001963153, 15001963154, 15001963155, 15001963156, 15001963157, 15001963158, 15001963159, 15001963160, 15001963161, 15001963162, 15001963163, 15001963164, 15001963165, 15001963166, 15001963167, 15001963168, 15001963169, 15001963170, 15001963171, 15001963172, 15001963173, 15001963174, 15001963175, 15001963176, 15001963177, 15001963178, 15001963179, 15001963180, 15001963181, 15001963182, 15001963183, 15001963184, 15001963185, 15001963186, 15001963187, 15001963188, 15001963189, 15001963190, 15001963191, 15001963192, 15001963193, 15001963194, 15001963195, 15001963196, 15001963197, 15001963198, 15001963199, 15001963200, 15001963201, 15001963202, 15001963203, 15001963204, 15001963205, 15001963206, 15001963207, 15001963208, 15001963209, 15001963210, 15001963211, 15001963212, 15001963213, 15001963214, 15001963215, 15001963216, 15001963217, 15001963218, 15001963219, 15001963220, 15001963221, 15001963222, 15001963223, 15001963224, 15001963225, 15001963226, 15001963227, 15001963228, 15001963229, 15001963230, 15001963231, 15001963232, 15001963233, 15001963234, 15001963235, 15001963236, 15001963237, 15001963238, 15001963239, 15001963240, 15001963241, 15001963242, 15001963243, 15001963244, 15001963245, 15001963246, 15001963247, 15001963248, 15001963249, 15001963250, 15001963251, 15001963252, 15001963253, 15001963254, 15001963255, 15001963256, 15001963257, 15001963258, 15001963259, 15001963260, 15001963261, 15001963262, 15001963263, 15001963264, 15001963265, 15001963266, 15001963267, 15001963268, 15001963269, 15001963270, 15001963271, 15001963272, 15001963273, 15001963274, 15001963275, 15001963276, 15001963277, 15001963278, 15001963279, 15001963280, 15001963281, 15001963282, 15001963283, 15001963284, 15001963285, 15001963286, 15001963287, 15001963288, 15001963289, 15001963290, 15001963291, 15001963292, 15001963293];//参与人员 //内定中奖人员 var initP = [13870620815, 13901647848, 13901757122]; var p1Num = 3;//一等奖数量 var p2Num = 5;//二等奖数量 var p3Num = 10;//三等奖数量 var p1Winner = new Array();//一等奖中奖者 var p2Winner = new Array();//二等奖中奖者 var p3Winner = new Array();//三等奖中奖者 var btn =true;//按钮状态未开始还是结束 var key =0;//中奖下标 var time=0;//定时器 //点击按钮 function start(){ if(btn){ if((p1Num<=0) && (p2Num<=0) && (p3Num<=0)){ $("button").hide(); alert("所有抽奖已结束"); }else if($('select').val() == 3 && (p3Num<=0)){ alert('三等奖已抽取完毕，请选择其他奖项...'); }else if($('select').val() == 2 && (p2Num<=0)){ alert('二等奖已抽取完毕，请选择其他奖项...'); }else if($('select').val() == 1 && (p1Num<=0)){ alert("一等奖已抽取完毕，请选择其他奖项..."); }else{ btn = false; $('button').removeClass('start').addClass('end').text("结束抽奖"); startTrun(); } }else{ btn = true; $('button').removeClass("end").addClass("start").text("开始抽奖"); endTrun(); console.log(p3Num,p2Num,p1Num); } } function runTime(){ //$("button").show(); clearInterval(time); time=setInterval('trunNum()',10); } function trunNum(){ key=Math.floor(Math.random()*(data.length-1)); var tel=data[key].toString().substr(0, 3)+'****'+data[key].toString().substr(7); $(".result-box").text(tel); } function startTrun(){ runTime(); } //停止转动数字 function endTrun(){ clearInterval(time); if($("select").val() == 3){ data.splice(key,1); p3Winner.push(data[key]); $(".list").prepend("<p>第"+p3Num+"名："+data[key]+"</p>"); p3Num--; if(p3Num == 0){ $(".list").prepend("<p>三等奖获得者</p>"); } }else if($('select').val() == 2){ data.splice(key,1); p2Winner.push(data[key]); $(".list").prepend("<p>第"+p2Num+"名："+data[key]+"</p>"); p2Num--; if(p2Num == 0){ $(".list").prepend("<p>二等奖获得者</p>"); } }else{ data.splice(key,1); p1Winner.push(data[key]); $(".list").prepend("<p>第"+p1Num+"名："+data[key]+"</p>"); p1Num--; if(p1Num == 0){ $(".list").prepend("<p>一等奖获得者</p>"); } } } </script> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> img{ height: 300px; width: 300px; /* margin: auto;*/ } </style> <script src="js/jquery-3.6.js"></script> <link type="text/css" href="css/天气网页.css" rel="stylesheet"> <title>阴天晴天雨天案例一</title> </head> <body> <script src="js/aa.js"></script> <!--html部分--> <ul> <li> <p>今天是</p> <img src="img/imgs/we1 (3).jpg" > <p>晴天</p> </li> <li> <p>明天是</p> <img src="img/imgs/we1 (1).jpg"> <p>阴天</p> </li> <li> <p>后天是</p> <img src="img/imgs/we1 (2).jpg" > <p>雨天</p> </li> </ul> <div id="new" > <div>今天天气晴<br>气温35℃<br>出门注意防晒</div> <div>明天阴天<br>气温28℃<br>适合室外活动</div> <div>后天雨天<br>气温27℃<br>出门记得拿伞</div> </div> <footer id="footer" style="font-size: 40px;color: cyan;"> 作者：A202020895 时间 2021/11/2 </footer> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册</title> <style> #login { width: 560px; height: 350px; border: 1px solid #ccc; position: absolute; background: #fff; } #login form{margin: 20px 5px 20px 90px;} #login h2 { height: 40px; line-height: 40px; text-align: center; font-size: 16px; letter-spacing: 1px; color: #fff; background: #044599; margin: 0; padding: 0; border-bottom: 1px solid #ccc; margin: 0 0 20px 0; } #login div { font-size: 14px; color: #666; padding: 5px 0; text-align: left; } #login input.text { width: 200px; height: 25px; border: 1px solid #ccc; background: #00CED1; font-size: 14px; } .pc{ margin:0 8px; color: #00BFFF; } #login input.submit { width: 107px; height: 40px; background: darksalmon; border: none; cursor: pointer; color: #FFFFFF; font-size: 22px; font-family: "黑体"; margin: 20px 120px; border-radius: 6px; } </style> </head> <body> <div id="login"> <h2> 用 户 注 册</h2> <form name="regform" action="123.html" > <div>用户帐号：<input type="text" id="user" name="user" autofocus class="text" /><span id="userInfo" class="pc">*</span></div> <div>用户密码：<input type="password" id="pass" name="pass" class="text" /><span id="passInfo" class="pc">* </span></div> <div>确认密码：<input type="password" name="rpass" class="text" /><span id="rpassInfo" class="pc">* </span></div> <div>个人邮箱：<input id="email" type="email" name="email" class="text"/><span id="emailInfo" class="pc">*</span> </div> <div>联系电话：<input id="tel" type="tel" name="tel" class="text"/><span id="telInfo" class="pc">*</span></div> <a href="END1.html"> <input type="button" name="sub" class="submit" value="注 册" /> </a> </form> </div> </body> <script> //regform.sub.onclickregform.onsubmit //var flag=0; function getId(id){return document.getElementById(id);} var userInfo=getId('userInfo'); var passInfo=getId('passInfo'); var rpassInfo=getId('rpassInfo'); var emailInfo=getId('emailInfo'); var telInfo=getId('telInfo'); function formCheck(o,oInfo,rule,info) { if(rule.test(o.value)){ oInfo.innerHTML='√'; oInfo.style.color='#008000'; // flag+=1; } else {oInfo.innerHTML=info; } } var uname=regform.user;uname.focus(); uname.onblur=function(){formCheck(this,userInfo,/^[0-9a-zA-Z]\w{4,16}$/,'5-16数字或字母组成');} var pass=regform.pass;pass.focus(); pass.onblur=function(){formCheck(this,passInfo,/^\w{6,12}$/,'6位数字/字母/英文符号');} var rpass=regform.rpass;rpass.focus(); rpass.onblur=function() { formCheck(this,rpassInfo,/^\w{6,12}$/,'6位数字/字母/英文符号'); if(pass.value!=rpass.value) {rpassInfo.innerHTML='两次密码不一致！'; regform.sub.disabled=true; } else { regform.sub.disabled=false; //flag+=1; } } email=regform.email;email.focus(); email.onblur=function(){formCheck(this,emailInfo,/^\w+@\w+\.\w+$/,'邮箱格式有误');} tel=regform.tel;tel.focus(); tel.onblur=function(){formCheck(this,telInfo,/^1[358]\d{9}$/,'电话号码格式非法');} //提交 regform.sub.onclick=function () { alert(email.focus()); //if (flag==6) { regform.submit(); //} }; window.onload = function() { var login = document.getElementById('login') ; var top = (document.documentElement.clientHeight - 350) / 2; var left = (document.documentElement.clientWidth - 560) / 2; login.style['top'] = top + 'px'; login.style['left'] = left + 'px'; window.onresize = function() { var top = (document.documentElement.clientHeight - 350) / 2; var left = (document.documentElement.clientWidth - 560) / 2; login.style['top'] = top + 'px'; login.style['left'] = left + 'px'; } } </script> </html>
