这是用JS来实现的随机选号器，从0到99个数中，随机生成一个整数。
- HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>随机选号器</title>
<link rel="stylesheet" href="css/change.css" type="text/css"/>
</head>
<body>
<div>
<form>
<input type="text" class="text1" value="0" id="myText"/><br />
<input type="button" class="text2" value="开始" onclick="startText()"/>
<input type="button" class="text3" value="停止" onclick="stopText()"/> <!--onclick事件会在元素被点击时发生-->
</form>
</div>
<script type="text/javascript" src="js/p1.js"></script>
</body>
</html>
- CSS代码(change.css)
.text1{ /*文本框*/
height: 400px;
width: 400px;
font-size: 340px;
border: 5px dashed cornflowerblue; /*设置所有边框属性。*/
border-radius: 10px; /*给元素设置圆角边框*/
text-align: center;
}
.text2{
position:relative; /*relative是相对定位，是相对于前面的容器定位的。*/
top: 40px;
left: -90px;
height: 40px;
width: 100px;
}
.text3{
position: relative;
top: 40px;
left: 90px;
height: 40px;
width: 100px;
}
div{
text-align: center;
}
- JavaScript代码(p1.js)
var timer;
//开始
function startText(){
var num = Math.floor(Math.random()*100); //随机产生0到99的数
document.getElementById("myText").value = num;
timer = setTimeout("startText()",60); //定时器函数，递归调用
}
//暂停
function stopText(){
clearTimeout(timer); //清除创建的定时器
}
- 实现结果
3194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
