javascript如何实现随机选人效果？本篇文章就给大家介绍javascript实现随机选人效果的方法（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
因工作需要，写了一个随机选人的小网页，先看效果图。
背景也是动态的，只不过在写的时候碰到个问题，就是如果把生成动态流星雨的画布放到上生成随机数的操作界面之上的话，会看不到生成随机数的操作界面。
是生成动态特效的canvas画布占了操作界面的p的位置，后来我将p放到画布的上面，又将p设置定位让其不占位置，才将布局弄好。
不知道各位大神还有什么办法能将js动画设置为网页背景。有知道的大神麻烦沟通一下。
立即学习“Java免费学习笔记（深入）”；
此附上整个页面的代码。
java /script> 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 {}<!-- 画布 画板 画画的本子 --> 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 h && Math.random() > 0.99) { drops[i] = 0; } drops[i]++; } } setInterval(drawString, 30);
登录后复制
有不合适的地方还请各位大神多多指教。
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。更多相关教程请访问JavaScript视频教程，jQuery视频教程，bootstrap教程！
以上就是JavaScript如何实现随机选人效果？（代码实例）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2739115.html
