原生js实现点名器

74 阅读 0 评论 49 点赞

我是靠谱客的博主危机大白，这篇文章主要介绍原生js实现点名器，现在分享给大家，希望可以做个参考。

效果图：

manwei

直接上代码，太简单了：

html：

<!DOCTYPE html>
<html>
<head>
	<title>漫威点名器</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="test9.css">
</head>
<body>
	<div id="container">
		<div id="display"></div>
		<div id="button">选择英雄</div>
	</div>
	<script type="text/javascript" src="test9.js"></script>
</body>
</html>

css：

/*------------------------公共样式表----------------------------*/
* {
	margin: 0px;
	padding: 0px;
	border: 0px;
}
/*------------------------功能样式表----------------------------*/
#container {
	position: relative;
    width: 600px;
    height: 370px;
    margin: 15px auto;
    background-color: brown;
    border-radius: 15px;
    display: flex;
    justify-content: center;
}
#display {
	position: absolute;
    width: 500px;
    height: 200px;
    top: 50px;
    background-color: yellow;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 95px;
}
#button {
	position: absolute;
    width: 400px;
    height: 60px;
    top: 280px;
    background-color: orange;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
    font-size: 30px;
    cursor: pointer;
}

js：

var namelist = ["美国队长", "绿巨人", "钢铁侠", "神奇女侠", "黑寡妇", "鹰眼", "冬兵", "雷神托尔", "幻视", "绯红女巫",
 "北极星", "快银", "蜘蛛侠", "奇异博士", "星爵", "树人格鲁特", "超人", "蝙蝠侠", "闪电侠", "火箭熊", 
 "金刚狼", "螳螂女", "万磁王", "勇度", "暴风女", "猎鹰", "战争机器", "蚁人", "惊奇队长", "黑豹"];
var shiftbutton = document.getElementById("button");
var time;
var flag = 1;//flag为0关闭，flag为1开始
function changename() {
	time = setInterval(nameswitch, 100);
}
function nameswitch() {
	var num = (parseInt(Math.random()*100))%30;
	document.getElementById("display").innerHTML = namelist[num];
}
nameswitch();
shiftbutton.onclick = function() {
	if(flag == 0) {
		clearInterval(time);
		flag = 1;
		document.getElementById("button").innerHTML = "换一个";
	}
	else if(flag == 1) {
		changename();
		flag = 0;
		document.getElementById("button").innerHTML = "选择英雄";
	}
}