JavaScript写的随机选人真实案例

时间 2020-06-02

标签 javascript 写的随机选人真实案例栏目 JavaScript 繁體版

原文原文链接

JavaScript写的随机选人真实案例javascript

因工做须要，写了一个随机选人的小网页，先看效果图。css

背景也是动态的，只不过在写的时候碰到个问题，就是若是把生成动态流星雨的画布放到上生成随机数的操做界面之上的话，会看不到生成随机数的操做界面。html

是生成动态特效的canvas画布占了操做界面的div的位置，后来我将div放到画布的上面，又将div设置定位让其不占位置，才将布局弄好。java

不知道各位大神还有什么办法能将js动画设置为网页背景。有知道的大神麻烦沟通一下。npm

此附上整个页面的代码。bootstrap

<!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>

有不合适的地方还请各位大神多多指教。canvas