每个定时器从开始到结束时卜庆宴间逐渐增大，这样就起到了点名器旋转慢型银慢变慢的效果。
实现外部导入，假如要通过input file表单形式选择文件，可以散迹通过这种方式读取数据<form id="form">
<!-- 选择本地文本 -->
<input type="file" name="file" onchange="selectFile()" />
</form>
<script>笑掘烂
function selectFile() {
let formData = new FormData(document.getElementById('form'))
let reader = new FileReader()
reader.readAsText(formData.get('file'))
reader.onload = function() {
let text = this.result // 读到的文本
// 假如文本是 张三，李四，王五 格式，切割为数组
console.log(text.split("，")) // ["张三"碰漏, "李四", "王五"]
}
}
</script>
思路：
准备3条CSS样式，对应“已到”、“迟到”和“请假”状态（也可按实际情况拓展）：
“点名”元素添加 onclick 事件戚侍逗，点击后依次切换3种状态以及对应文案。
完整代码：
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>点名</title>
<style>
body {font:normal 14px/1.8 normal tahoma}
.ui-table {width:900px margin:0 auto border-collapse:collapse}
.ui-table td {padding:5px text-align:center border:1px solid #369}
.is-here {background:#86e285} /* 已到 */
.is-late {background:#f69191} /* 迟到 */
.is-leave {background:#f6e291} /* 请假 */
</style>
</head>
<body>
<table class="ui-table">
<tr>
<td>1</td>
<td>张三</td>
<td>
<a href="javascript:" onclick="rollcall(this)">点名</a>
</td>
<td>短信</td>
<td>电话</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>
<a href="javascript:" onclick="rollcall(this)">点名</a>
</td>
<td>短信</td>
<td>电话</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>
<a 高卖href="javascript:" onclick="rollcall(this)">点谈举名</a>
</td>
<td>短信</td>
<td>电话</td>
</tr>
</table>
<script>
var statusArr = [
{
name: "已到",
state: "is-here"
}, {
name: "迟到",
state: "is-late"
}, {
name: "请假",
state: "is-leave"
}
]
function rollcall(elm) {
var parent = elm.parentNode.parentNode, // tr
idx = 0
if (parent.className) {
for (var i = 0 i < statusArr.length i++) {
if (parent.className === statusArr[i].state) {
if (i === statusArr.length - 1) { // 最后一项
idx = 0
} else {
idx = i + 1
}
break
}
}
}
parent.className = statusArr[idx].state
elm.innerHTML = statusArr[idx].name
}
</script>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）