前端:運用js制作一個隨機點名的程式
1.html結構
主要用了三個標簽，分別為img、p、input標簽，他們的主要作用分別為顯示圖片、顯示名字和點擊按鈕，結構如下：
外面的那個div標簽主要用來使整個內容居中，
這里的input標簽添加了一個onclick點擊事件，也就是點擊一下這個按鈕就會觸發的事件，
2.css樣式
為了使整個內容居中顯示，需要設定相應的CSS樣式，小編使用的圖片大小寬和高都一樣，所以設定img標簽的寬和高的大小也是一樣的(效果好看一點)，如下，
這里還設定了背景顏色，也就是沒有點擊隨機點名的那個按鈕時顯示的背景色，
這里說一下，因為img標簽是行內標簽，如果單獨設定width，height屬性是沒有任何作用的，需要設定他為塊級標簽才有作用，所以設立設定display屬性值為block.
為了使整個內容處于居中的位置，需要將外部的div標簽設定一下，如下：
下面的就是p標簽和input標簽的css樣式，
這個讀者應該很容易看懂，小編就不一一贅述了，不明白的讀者到時候可以在評論區評論喔！
3.js代碼
因為這里需要需要用來圖片，所以相應的圖片肯定是需要的，每張圖片的命名最好直接寫圖片上人的名字，為此需要定義一個陣列，用來存盤圖片名稱，不需要加后綴名，到時候直接使用字串的拼接即可，
這里的img1就是img標簽，通過標簽名獲取的，
因為這種方式獲取的是陣列，所以需要寫上索引，
p標簽也一樣，只不過這里使用p1.innerHTML=圖片名
例外，需要講一下setInterval()方法，里面可以寫兩個引數，第一個引數是方法名，當然也可以寫具體實作，第二個引數是時間，也就是每隔多久執行一下這個方法，
全部js代碼如下：
var arr1=["何潤東","劉德華","劉詩詩","劉濤","張涵予","張杰","張若昀","張雨綺","周星馳","周雨彭","胡歌","劉亦菲","娜扎","楊冪","張含韻","張靚穎","趙麗穎","周冬雨","熊希霖","范冰冰"];
// 陣列長度為20
function bianhuan(){
var ran1=Math.round(Math.random()*100); //生成50以內的亂數
ran1+=20; // 至少回圈一輪
console.log(ran1);
var num=0;
var inte=setInterval(function(){
var img1=document.getElementsByTagName("img")[0];
var p1=document.getElementsByTagName('p')[0];
var imgName=arr1[num%20];
img1.src="./imgs/"+imgName+".png";
p1.innerHTML=imgName;
if(num==ran1){
clearInterval(inte);
}
num++;
},100);
}
實作效果如下:
js實作隨機點名程式
全部代碼已經上傳到gitee，有需要的讀者可以自行下載，下載鏈接為:
js實作隨機點名程式
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/290318.html
標籤：其他