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="data: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>

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

JavaScript写的随机选人真实案例的更多相关文章

  1. javascript 写一个随机范围整数的思路

    const {random} = Math; //返回 [min,max] 的随机值 //[0,1) * (max - min + 1) => [0,max-min+1) //[0,max-mi ...

  2. ENode 2.0 - 第一个真实案例剖析-一个简易论坛（Forum）

    前言 经过不断的坚持和努力,ENode 2.0的第一个真实案例终于出来了.这个案例是一个简易的论坛,开发这个论坛的初衷是为了验证用ENode框架来开发一个真实项目的可行性.目前这个论坛在UI上是使用了 ...

  3. JavaScript写一个连连看的游戏

    天天看到别人玩连连看, 表示没有认真玩过, 不就把两个一样的图片连接在一起么, 我自己写一个都可以呢. 使用Javascript写了一个, 托管到github, 在线DEMO地址查看:打开 最终的效果 ...

  4. 用javascript 写个函数返回一个页面里共使用了多少种HTML 标签

    今天我无意间看到一个面试题: 如何用javascript 写个函数返回一个页面里共使用了多少种HTML 标签? 不知你看到 是否蒙B了,如果是我 面试,肯定脑子嗡嗡的响.... 网上搜了搜也没有找到答 ...

  5. JavaScript写在Html页面的<head></head>中

    JavaScript写在Html页面的<head></head>中 ----------------- <html> <head> <style ...

  6. javascript写在<head>和<body>里的区别

    Javascript写在哪里?概括起来就是三种形式:1. 内部:Html网页的<body></body>中:2. 内部:Html网页的<head></head ...

  7. 利用UDP19端口实施DOS攻击的真实案例

    昨天在一个用户现场发现了一个利用UDP19端口对互联网受害者主机进行DOS攻击的真实案例.这个情况是我第一次见到,个人认为对以后遇到此类情况的兄弟具有参考价值.有必要做一个简单的分析记录. 在此次的分 ...

  8. 原生javascript写的侧栏跟随效果

    浏览网站时经常看到有的网站上,当一个页面很长的时候,设定侧栏内容会跟随滚动条滚动,我们把这种效果叫做“侧栏跟随滚动”.这种特效对提高网站浏览量.文章点击率.广告点击量都有一定效果. 侧栏跟随滚动的实现 ...

  9. javascript 写一段代码，判断一个字符串中出现次数最多的字符串，并统计出现的次数

    javascript 写一段代码,判断一个字符串中出现次数最多的字符串,并统计出现的次数 function test(){ var bt = document.getElementById(" ...

随机推荐

  1. [Swift]八大排序算法（一）：冒泡排序

    排序分为内部排序和外部排序. 内部排序:是指待排序列完全存放在内存中所进行的排序过程,适合不太大的元素序列. 外部排序:指的是大文件的排序,即待排序的记录存储在外存储器上,待排序的文件无法一次装入内存 ...

  2. 关于VisualStudio性能分析数据中的独占样本数和非独占样本数的意义

    VisualStudio中自带有Profile工具进行性能性能分析,其中用得比较多的数据是函数调用时间,它主要有独占样本数和非独占样本数两个指标,关于这两个指标代表的意义,MSDN的解释比较文艺: 非 ...

  3. AVFoundation 文本播报

    #import <Foundation/Foundation.h> #import <AVFoundation/AVFoundation.h> @interface Speak ...

  4. 记一个SpringBoot中属性注入失败的问题Consider defining a bean of type ''' in your configuration

    今天遇到的一个问题: 代码检查了好几次,都没有错误,但是启动时就会报错Consider defining a bean of type ''' in your configuration. 启动类在c ...

  5. css flex 使内容 水平居中 的方法...

    刚开始以为是  justify-content : center 设置为 居中... 的确,,当 元素满了时 的确能 居中.但是 当只有一个元素时,这一个元素也会居中... 想了半天没找到方法..突然 ...

  6. [转] JAVA从本机获取IP地址

    [From] https://www.cnblogs.com/xiaoBlog2016/p/7076230.html 论述: 此篇博客是在工作的时候,需要获得当前网络下面正确的ip地址,在网上查阅很多 ...

  7. Python入门(2)

    变量补充 一:变量名的名称的大前提:应该能够反映出变量值所记录的状态 具体的,变量名命名规范如下: 1.变量名是由字母.数字.下划线组成 2.不能以数字开头 3.不能使用关键字命名变量名['and', ...

  8. 51Nod - 1179

    给出N个正整数,找出N个数两两之间最大公约数的最大值.例如:N = 4,4个数为:9 15 25 16,两两之间最大公约数的最大值是15同25的最大公约数5.   Input第1行:一个数N,表示输入 ...

  9. JS实现跨域请求数据--jsonp

    * { margin: 0; padding: 0; } input { width: 300px; height: 30px; border: 1px solid lightgray; margin ...

  10. Python学习 day07

    一.关于解决问题的思路 1.删除列表中索引为单数的元素. 别人的思路: 利用切片 li = [11, 22, 33, 44, 55] li = li[::2] print(li) 思考:虽然学了pyt ...