通过一星期的web前端知识学习,自己完成了一个简单的点名程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.head {
width: 100%;
text-align: center;
background-image: url(img/bg.jpg);
background-attachment: fixed;
top: 0;
font-size: 1.5em;
padding: 10px;
color: rgb(255, 255, 255);
}
.container {
position: absolute;
width: 100%;
height: 614px;
background: url(img/bd2.jpg) no-repeat;
}
.title {
position: absolute;
left: 0;
right: 0;
text-align: center;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
border: 1px solid rgba(255, 255, 255, 0.5);
cursor: pointer;
color: #fff;
font-size: 1.1em;
font-family: "微软雅黑";
background-color: rgb(1, 216, 103);
transition: all 1s linear;
border-radius: 20px;
}
.btn:hover {
background-color: #D84C29;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.tip{
display: inline-block;
animation: sc 5s infinite linear;
}
#showbox {
position: absolute;
left: 0;
right: 0;
top: 50%;
color: white;
font: bold 3em "myfont";
text-align: center;
}
/*自定义动画*/
@-webkit-keyframes sc {
0% {
transform: scale(1.0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1.0);
}
}
@font-face {
font-family: "myfont";
src: url('font/FZLTXHJW.TTF');
}
</style>
</head>
<body>
<header class="head">
欢迎使用点名系统
</header>
<div class="container">
<div class="title">
<span><button class="btn" id="btn" οnclick="start()">随机点名</button></span>
<span><button class="btn" οnclick="stop()">停止</button></span>
</div>
<div id="showbox">
<span class="tip"></span>
</div>
</div>
<script>
var arr = [
//这里填写姓名(如:'张三','李四')
];
var code = '';
var int;
function genCode() {
code = '';
var index = Math.floor(Math.random() * arr.length);
code += arr[index];
$('showbox').innerHTML = code;
}
//开始随机点名
function start() {
int = self.setInterval("genCode()", 50);
$('showbox').className='showbox';
return int;
}
//停止点名
function stop() {
int = window.clearInterval(int);
$('showbox').className = 'tip';
}
function $(id) {
return document.getElementById(id);
}
</script>
</body>
</html>