因为希望观赏舒适，故将css,javascript写成了内联
辉常努腻的网页点名器-可搬运-分享无碍
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>辉常努腻的点名器-可搬运-分享无碍</title> <style type="text/css"> /*css样式*/ #h1{ font-family: "楷体"; width: 150px; text-align: center; line-height: 60px; font-size: 35px; color: #8232CD ; height: 60px; background: #32CDA7 ; display: block; margin: auto ; } #b1{ width: 70px; height: 30px; display: block; margin: auto; } p{ text-align: center; /*letter-spacing: 2px;*/ font-size: 12px; background: lightskyblue; width: 150px; height: 20px; line-height: 20px; margin:20px auto; } #xia{ margin:20px auto; font-size: 40px; text-align: center; } .body{ margin:300px auto 0 ; display: none; transform: scale(2); } .positiopn{ margin: auto; width: 300px; height: 60px; } </style> </head> <body> <div class="body"> <section class="positiopn"> <!--名字区域--> <h1 id="h1">X X X</h1> </section> <p id="p1">准备好了吗，开车咯</p> <!--点名器按钮--> <button id="b1">开 始</button> </div> <div id="xia"> ↓ </div> <!--添加名字区域 可F12查看--> <input type="text" name="" placeholder="push()" id="a1" value="" style="transform: scale(2) translateY(20px) translateX(45px); border: solid #8232CD 2px;"/> <script src="js/jquery-2.0.3.min.js" type="text/javascript"> //Jquery 插件 </script> <script type="text/javascript"> //JavaScript / Jquery 部分 $("#xia").click(function(){ $(".body").slideToggle(300) $(this).fadeToggle() }) $("#b1").click(function(){ $("#h1").slideToggle(700) }) //js原生代码获取元素 var h1=document.getElementById("h1") var b1=document.getElementById("b1") var p1=document.getElementById("p1") var a1=document.getElementById("a1") var a2=document.getElementById("a2") var a=0 var c=null; var timer;//定时器 //添加姓名 push事件 window.onkeydown=function(event){ // var e = event || window.event || arguments.callee.caller.arguments[0]; if(event.keyCode==13 && a1.value==""){ alert("请输入名字后按回车") }else if(event.keyCode==13 ){ arr.push(a1.value) console.log(arr) a1.value="" } // a1.value="" } //点名器 姓名列表-可在网页中及时添加 var arr = ["安雪辰", "曹胜龙","陈子怡","丁 浩","樊彧豪","高 宇","顾子良","韩阔","郝廉庆","胡博魁","霍瑞坤", "贾鑫博","金泽宇","李博豪","李嘉豪","李少轩","李亚辉","李振寅","刘德旺","刘佳欣","刘 帅","陈 君", "刘星雨","刘梓博","吕永辉","马晓倩","孟巾富","牛栋梁","齐少佳","屈向阳","芮坎尚","时浩杰","张淇军", "宋华金","孙晨旭","孙 茜","王鹤铭","王 铠","王 文","王亚乾","王云鹤","谢继然","徐 博", "薛丁华","杨成财","于浩旺","占俊杰","张观智","张 华","张凯旋","张雪丰","张毅辉"]; //点名器按钮 b1.onclick=function(){ if(a==0){ timer=setInterval("jisuan()",50) a=1 b1.innerHTML="停 止" p1.innerHTML="别紧张,指不定是谁呢！" }else{ a=0 b1.innerHTML="开 始" p1.innerHTML="恭喜你！" clearInterval(timer) } } //控制台查看该列表明细 console.log(arr.length) //随机抽取名字 function jisuan(){ var i=Math.floor(Math.random()*arr.length) h1.innerHTML=arr[i] console.log(Math.random()) } </script> </body> </html>
