不知道有没有人和我一样,总觉得学习的过程很枯燥,很难找到成就感。其实没有成就感就是因为自己能力不够,所以才要努力学习。俺现在是一名双非大三的学生,不打算考研。所以即将要面对实习和工作,一想到这,就不由得焦虑起来。所以为了弥补大一大二所浪费的时间,我最近正在努力的学习java,每天学。因为想有自己的一技之长,想立足在这个行业,所以不得不逼自己一把。但是谁也不知道这个逼自己一把的过程有多煎熬,很多知识总是学会了就忘,所以我会尽量在学完一个知识点之后就总结一下下。我现在就是一个再普通不过的大三学生,我正在努力,不知大家都过的怎么样,也欢迎有志同道合的小伙伴来和我一起进步。为了让大家能够快速的找到成就感,我用刚学完的js给写了一个随机点名器,给大家分享一波。
这就是这个随机点名器的首页了,当我们点击开始时,就会开始随机点名,时间间隔我这里设置的是50ms, 点击开始后,如下图:
然后我们就可以点击停止了,点击停止之后效果图如下:
这个随机点名器就是这样子的了。它的实现是很简单的,其实整个页面就由一个div元素,一个h1标签,再加一个按钮组成。给按钮添加点击事件,当点击按钮时,就生成一个随机数,当然按钮的颜色也相应的做些改变。那我们要产生什么范围的随机数呢,这得看随机点名的名单数组中的长度了。因为要随机点名,所以肯定了要有一个名单数组。然后当点击按钮的时候生成相应的随机数作为数组的下标,然后把数组中对应的下标元素写到h1标签当中。我们再设置一个定时器,当点击了开始后,定时器就开始,当点击了停止之后,定时器就停止。基本思路就是这样子,用到的知识点很少,主要是定时器的使用,还有就是点击事件的处理。下面给代码大家研究研究:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>随机点名器</title>
<style type="text/css">
div{
background-color:deepskyblue;
width: 400px;
height: 300px;
padding: 50PX;
margin-left: 30%;
margin-top: 100px;
box-sizing: border-box;
box-shadow:10px 10px 10px #B00000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
}
h1{
width: 150px;
height: 80px;
background-color: orange;
margin-left: 70px;
padding-left: 15px;
padding-top: 20px;
box-sizing: border-box;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
}
.bt{
width: 80px;
height: 40px;
margin-left: 110px;
font-size: 18px;
font-weight: bolder;
background-color:green;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
}
</style>
</head>
<body >
<div class="random">
<h1 id="randomName">
随机点名
</h1>
<input type="submit" id="btin" class="bt" value="开始" onclick="rName()" />
</div>
</body>
</html>
<script>
var flag;
function rName(){
var bt = document.getElementById("btin");
if(bt.value=="开始"){
bt.value="停止";
bt.style.backgroundColor="red";
//开始定时器
flag=window.setInterval("ranName()",50);
}else if(bt.value=="停止"){
window.clearInterval(flag);
bt.value="开始";
bt.style.backgroundColor="green";
}
}
function ranName(){
var arr = new Array("赵丽颖","刘昊然","李宇春","何炅","谢娜","吴尊","刘德华","毛不易","张一山","贾玲","杨幂","郭麒麟","郭德纲","杨紫","于斌","梁靖康","王俊凯","王源","关晓彤","周冬雨","王一博","肖战","路飞","易烊千玺","周深");
var name = document.getElementById("randomName");
var len = arr.length;
var rd = randomCode(0,len);
name.innerHTML=arr[rd];
}
/*生成一个在某个范围内的随机数*/
function randomCode(min, max) {
return Math.floor(Math.random() * (max - min)) + min
}
</script>
核心代码其实就是script标签内的代码,如果大家了解html和css的话就都能看懂上面那些布局了,这里就不赘述了。
该程序已经上传到我的资源,欢迎大家下载体验:快点我查看,有惊喜!(免费下载)