JavaScript如何實現隨機選人效果？ （程式碼實例）
- 青灯夜游轉載
- 2018-10-16 16:49:435229瀏覽
JavaScript如何實現隨機選人效果？本篇文章就跟大家介紹JavaScript實現隨機選人效果的方法（程式碼實例）。有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。
因為工作需要，寫了一個隨機選人的小網頁，先看效果圖。
背景也是動態的，只不過在寫的時候碰到個問題，就是如果把生成動態流星雨的畫布放到上產生隨機數的操作介面之上的話，會看不到產生隨機數的操作介面。
是產生動態特效的canvas畫布佔了操作介面的p的位置，後來我將p放到畫布的上面，又將p設定定位讓其不佔位置，才將佈局弄好。
不知道各位大神還有什麼辦法能將js動畫設定為網頁背景。有知道的大神麻煩溝通一下。
此附上整個頁面的程式碼。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>java</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet"href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">/script>
</head>
<style>
body {
overflow: hidden; /*当内容溢出时，不显示*/
/* background-image: url("image/流星雨.jpg"); */}.pv {
position: absolute;
top: 50px;
left: 42%;
width: 268px;
height: 600px;
}
#num {
text-align: center;
color: white;
font-size: 40px;
}
.button {
text-align: center;
}
#img {
width: 268px;
height: 271px;
}
#canvas {}
</style>
<body>
<p class="pv">
<img class="img-thumbnail" alt="头像" id="img" src="image/yuan.jpg">
<p id="num"></p>
<p class="button">
<button id="start" class="btn btn-success">开始</button>
<button id="stop" class="btn btn-info">结束</button>
</p>
</p>
<!--
<canvas>画布 画板 画画的本子 -->
<canvas width=400 height=400 style="background: #000000;" id="canvas"></canvas>
<!--
javascript 画笔 --></body><script type="text/javascript">
var num = document.getElementById("num");
var img = document.getElementById("img");
var start = document.getElementById("start");
var stop = document.getElementById("stop");
var image = [ "image/XX.jpg", "image/zXXn.jpg","image/XX.jpg", "image/XX.jpg", "image/XX.jpg","image/XX.jpg" ];
var arr = [ "曹XX", "赵XX", "XX", "李XX", "马XX", "沈XX" ];
var intv = null;
start.onclick = function() {
if (intv == undefined) {
intv = setInterval(function() {
var random = Math.floor(Math.random() * 6);
num.innerHTML = arr[random];
img.src = image[random];
}, 500);
}
}
stop.onclick = function() {
clearInterval(intv);
intv = null;
} /* 下面是流星雨代码 */
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var s = window.screen;
var w = s.width;
var h = s.height;
canvas.width = w;
canvas.height = h;
var fontSize = 14;
var clos = Math.floor(w / fontSize);
var drops = [];
var str = "qwertyuiopasdfghjklzxcvbnm";
for (var i = 0; i < clos; i++) {
drops.push(0);
}
function drawString() {
ctx.fillStyle = "rgba(0,0,0,0.05)"
ctx.fillRect(0, 0, w, h);
ctx.font = "600 " + fontSize + "px 微软雅黑";
ctx.fillStyle = "#00ff00"; for (var i = 0; i < clos; i++) {
var x = i * fontSize; var y = drops[i] * fontSize;
ctx.fillText(str[Math.floor(Math.random() * str.length)], x, y);
if (y > h && Math.random() > 0.99) {
drops[i] = 0;
}
drops[i]++;
}
}
setInterval(drawString, 30);</script></html>
有不合適的地方還請各位大神多多指教。
總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請造訪JavaScript影片教學，jQuery影片教學，bootstrap教學！
以上是JavaScript如何實現隨機選人效果？ （程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：cnblogs.com。如有侵權，請聯絡admin@php.cn刪除