JavaScript寫的隨機選人真實案例
因工作需要，寫了一個隨機選人的小網頁，先看效果圖。
背景也是動態的，只不過在寫的時候碰到個問題，就是如果把生成動態流星雨的畫布放到上生成隨機數的操作界面之上的話，會看不到生成隨機數的操作界面。
是生成動態特效的canvas畫布占了操作界面的div的位置，后來我將div放到畫布的上面，又將div設置定位讓其不占位置，才將布局弄好。
不知道各位大神還有什么辦法能將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"); */
} .divv { 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>
<div class="divv">
<img class="img-thumbnail" alt="頭像" id="img" src="image/yuan.jpg">
<div id="num"></div>
<div class="button">
<button id="start" class="btn btn-success">開始</button>
<button id="stop" class="btn btn-info">結束</button>
</div>
</div>
<!-- <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>
有不合適的地方還請各位大神多多指教。