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. .net core UseHttpsRedirection() 正式环境无效

    莫名其妙遇到这样的问题.这样的配置在本地可以,正式环境就不行了. ··· public void Configure(IApplicationBuilder app, Microsoft.AspNet ...

  2. bootstrap表单控件

    禁用状态: 被禁用的 fieldset 为<fieldset> 设置 disabled 属性,可以禁用 <fieldset> 中包含的所有控件. <form> &l ...

  3. Qt 学习之路 2（56）：使用模型操作数据库

    Qt 学习之路 2(56):使用模型操作数据库 (okgogo: skip) 豆子 2013年6月20日 Qt 学习之路 2 13条评论 前一章我们使用 SQL 语句完成了对数据库的常规操作,包括简单 ...

  4. css和js带参数v或version

    1 <span style="font-size:14px;">css和js带参数(形如.css?v=与.js?v= 或 .css?version=与.js?versi ...

  5. Rails应用系列(1):初识Rails

    第一个Rails应用 Rails是一个"模型-视图-控制器"框架(MVC).是用Ruby写的,所以要对Ruby要有一定的了解才能对rails框架深入学习.其实Ruby与Rails就 ...

  6. kerl build error

    删除 archives文件夹就行了

  7. P2801 教主的魔法

    传送门 $N$ 太大了主席树过不了 考虑分块 对每个块内的元素排序,询问就对大块二分查找,对两边小的部分暴力枚举 修改时维护 $add[i]$ 标记,维护当前块内整块已经加的数 那么整块的就直接修改 ...

  8. D3.js v4版本 按住shift键框选节点demo

    http://download.csdn.net/download/qq_25042329/10139649

  9. SPOJ - FREQ2 莫队 / n^1.5logn爆炸

    题意:给定\(a[1...n]\)和\(Q\)次询问,每次统计\([L,R]\)范围内出现频率最高的数的次数 想法没啥好说的,分别统计该数出现的次数和次数出现的次数,然后莫队暴力 注意本题时间卡的很紧 ...

  10. vue $index,$key已经移除了

    之前可以这样: <ul id="example"> <li v-for="item in items"> {{$index}} {{$k ...