一个简单的web点名程序（基于javascript）

来源：互联网发布：游戏客户端制作软件编辑：程序博客网时间：2024/05/16 16:07

通过一星期的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" onclick="start()">随机点名</button></span><span><button class="btn" onclick="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>

阅读全文

0 0