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. pycharm 不显示代码提示

    1.检查是否代码本身有问题. 2.检查代码提示是否成功开启. 3.检查IDE省电模式是否关闭状态. 4.使用快捷键:ctrl+j.ctrl+space.alt+/ 其他(不能安装): 1.检查是否Py ...

  2. Python实现KNN算法

    Python实现Knn算法 关键词:KNN.K-近邻(KNN)算法.欧氏距离.曼哈顿距离  KNN是通过测量不同特征值之间的距离进行分类.它的的思路是:如果一个样本在特征空间中的k个最相似(即特征空间 ...

  3. 【离散数学】 SDUT OJ 哪款赛车最佳？

    哪款赛车最佳? Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 四名专家对四款赛车进行 ...

  4. 大型php网站性能和并发访问优化方案（转载自php中文网）

               网站性能优化对于大型网站来说非常重要,一个网站的访问打开速度影响着用户体验度,网站访问速度慢会造成高跳出率,小网站很好解决,那对于大型网站由于栏目多,图片和图像都比较庞大,那该怎 ...

  5. 搭建Jenkins--（用于个人学习持续集成）

    ###1.安装java 完成后输入java -version,出现版本信息 输入 javac, 会出现 说明,JDK  和 JRE 安装正确 ###2.安装tomcat 1.下载Tomcat wind ...

  6. 传智播客Springmvc_mybatis学习笔记

    文件地址:https://download.csdn.net/download/qq_26078953/10614459

  7. mysql sql知识总结

    SQL知识总结: 检索不同的行: SELECT DISTINCT VEND_ID FROM PRODUCTS; DISTINCT 应用于所有的列 =================== 限制结果: S ...

  8. adb自救指南

    以下只能自救专用 adb.exe root adb remount adb.exe connect <Ip> adb.exe install [-r] [-d] <apkPath&g ...

  9. c# IList.ToList()后更改元素值会不会影响原列表的值

    class ListTest { public static void Test() { #region 值类型 var oListVal = new List<int>() { ,,, ...

  10. asp.net mvc 静态化

    静态化的基本理解就是,常用的资源以文本形式保存,客户端访问时无需经过程序处理,直接下载 但是不存在的文件需要经过程序处理,文件内容如果需要有更动或删除,则直接删除文件本身 1.IIS Express ...