js實(shí)現(xiàn)隨機(jī)點(diǎn)名程序
更新時(shí)間：2020年09月17日 10:53:59 作者：請叫我歪頭
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)隨機(jī)點(diǎn)名程序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近用到了一下隨機(jī)點(diǎn)名程序，就自己整理一下。代碼實(shí)現(xiàn)后的截圖如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>隨機(jī)點(diǎn)名</title>
<style>
#content{
width: 600px;
height: 400px;
background: #000;
margin: 100px auto;
text-align: center;
position: relative;
line-height: 300px;
color: dodgerblue;
font-size: 70px;
}
#btn1{
background: #ccc;
width: 180px;
height: 80px;
font-size: 30px;
color: #f40;
border-radius: 12px;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -90px;
}
</style>
</head>
<body>
<div id="content">
<span id="span1">
點(diǎn)擊開始
</span>
<button id="btn1">
start
</button>
</div>
<script>
var arr = ['中國','英國','德國','美國','意大利','法國','西班牙','日本','阿聯(lián)酋','荷蘭','葡萄牙'];
var $btn1 = document.getElementById('btn1');
var $content = document.getElementById('content');
var $span1 = document.getElementById('span1');
var timer;//計(jì)時(shí)器
var testNum = true;
$btn1.onclick = function(){
if(testNum){
// console.log(1);
start();
$btn1.innerHTML = 'stop';
testNum = false;
}
else{
// console.log(0);
stop();
$btn1.innerHTML = 'start';
testNum = true;
}
}
function start(){
timer = setInterval(function(){
var num = random(0,arr.length - 1);
$span1.innerHTML = arr[num];
},50)
}
function stop(){
clearInterval(timer);
}
// 隨機(jī)函數(shù)
function random(a,b){
var randomNum = Math.round(Math.random() * (b - a) + a);
return randomNum;
}
</script>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript-html標(biāo)題滾動(dòng)效果的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狫avaScript-html標(biāo)題滾動(dòng)效果的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
淺談javascript中字符串String與數(shù)組Array
這篇文章主要介紹了淺談javascript中字符串String與數(shù)組Array,需要的朋友可以參考下2014-12-12
微信小程序用戶授權(quán)獲取手機(jī)號(hào)（getPhoneNumber）
這篇文章主要給大家介紹了關(guān)于微信小程序用戶授權(quán)獲取手機(jī)號(hào)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
select由左邊框移動(dòng)到右邊，下面有個(gè)不錯(cuò)的示例，大家可以參考下2013-12-12
JS+CSS相對(duì)定位實(shí)現(xiàn)的下拉菜單
這篇文章主要介紹了JS+CSS相對(duì)定位實(shí)現(xiàn)的下拉菜單,涉及JavaScript結(jié)合css的定位技術(shù)實(shí)現(xiàn)下拉菜單的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
從URL中提取參數(shù)與將對(duì)象轉(zhuǎn)換為URL查詢參數(shù)的實(shí)現(xiàn)代碼
這兩種主要是對(duì)《Prototype淺析》先前略過的Sring部分中toQueryParams和Object部分的toQueryString方法的補(bǔ)充2012-01-01
可以移除數(shù)組中的值函數(shù) ，用來取出數(shù)組中的一些值，間接的修改了數(shù)組值。2009-07-07
UniApp使用manifest.json應(yīng)用配置的超詳細(xì)教學(xué)
這篇文章主要給大家介紹了關(guān)于uni-app應(yīng)用配置manifest.json最全最詳細(xì)配置,manifest.json文件是應(yīng)用的配置文件,用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
JS實(shí)現(xiàn)帶關(guān)閉功能的阿里媽媽網(wǎng)站頂部滑出banner工具條代碼
這篇文章主要介紹了JS實(shí)現(xiàn)帶關(guān)閉功能的阿里媽媽網(wǎng)站頂部滑出banner工具條代碼,可實(shí)現(xiàn)頂部banner窗口的浮動(dòng)顯示及關(guān)閉隱藏功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
本文主要介紹了利用js定義一個(gè)導(dǎo)航條菜單的方法。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03