您的位置：首页 > Web前端 > JavaScript

JS-案例-随机点名

2019-06-05 12:15 375 查看

第一种，点击一次鼠标，输出一个name

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100%;
height: 450px;
text-align: center;
line-height: 450px;
}
</style>
</head>
<body>
<div id="div0"></div>
<script>
var arr=[
"name1","name2","name3","name4",
"name5","name6","name7","name8",
"name9","name10","name11","name12","name13",
"name14","name15","name16","name17","name18",
"name19","name20","name21","name22","name23"
];
init();
function init() {
var div0=document.getElementById("div0");
document.onclick=function (e) {
arr.sort(function () {
return Math.random()-0.5;//乱序
});
div0.innerHTML=arr.pop();//取最后一个
}
}

</script>
</body>
</html>

第二种，自动滚动，点击停止

[code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 100%;
height: 450px;
text-align: center;
line-height: 450px;
}
</style>
</head>
<body>
<div id="div0"></div>
<script>
var arr=[
"name1","name2","name3","name4",
"name5","name6","name7","name8",
"name9","name10","name11","name12","name13",
"name14","name15","name16","name17","name18",
"name19","name20","name21","name22","name23"
];

var n=0,
bool=true;
init();
function init() {
var div=document.getElementById("div0");
arr.sort(function () {
return Math.random()-0.5;
});
document.onclick=function (e) {
arr.splice((n===0 ? arr.length-1 : n-1),1);
bool=!bool;
};
setInterval(animation,200,div);
}
function animation(div) {
if(!bool)return;
div.innerHTML=arr
;
n++;
if(n>arr.length-1)n=0;
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航