用js做一個簡單的班級點名器

本文轉載自查看原文 2019-05-27 16:40 1026

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>點名器</title>
	<style>
	*{
		margin:0;
		padding:0;
	}

	body {
		background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
	}

	#name {
		width: 300px;
		height: 300px;
		background:lightblue;
		border:1px solid green;
		border-radius:10px;
		margin:50px auto;
		font-size: 50px;
		text-align:center;
		line-height:300px;
	}

	.b2 {
		margin-left:430px;
	}

	button {
		margin-left:100px;
		height:50px;
		width:50px;
		
	}
	</style>
</head>
<body>
	<div id="name">
		開始點名
	</div>

<div class="b2">
	<button onclick="start()">開始</button>
	<button onclick="end()">結束</button>
</div>
</body>
<script type="text/javascript">
	// 聲明變量
    var time, // 計時器
        div,
        name; // 選中的用戶名

	div = document.getElementById('name');

    // 創建一個數組用來存儲數據
    var name_list = ["倪萍","渠新宇","王繼琳","張桓閣","高勤寶","余姚","李永忠","陳威","何春輝","施佳亮","張璐","卓越","周川莉","張元博","明仕鵬","羅昊","梁鈺琦","蔣雪飛","徐霄晴","陳嘉皓","王凡","甘雨濤","許靚","冀雲鵬","左文","王昭","范超","付艷琳","田林林","蔡宇飛","丁有為","張聰聰","張璐","劉曉瑋","朱瑩瑩","董雪維","楊曦","史康","郝軍","梁幀","何雙清","馬悅","唐傑","沈傑","明鳴","梁金鑫"];

    function start(){
        // 生成一個隨機數

        var num = Math.floor(Math.random() * name_list.length);

        // 根據隨機索引值來確定選中的姓名

        name = name_list[num];

        // 更改網頁里div的值

        div.innerHTML = name;

        // Window setTimeout() 方法
        time = setTimeout("start()",100);
    }

    function end() {

        clearTimeout(time);


        // clearTimeout() 方法可取消由 setTimeout() 方法設置的 timeout。
    }

</script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 js隨機點名器（簡單） js點名器效果 js編寫點名器 Java實現簡單隨機點名器自創點名器 Tkinter 隨機點名器 Java案例：隨機點名器 Java案例——隨機點名器用JS做一個簡單的計算器用JS,做一個簡單的計算器