首页 > > 网页制作 > Javascript >

JavaScript写的随机选人真实案例

2018-10-19 06:14:08来源：博客园阅读 ()

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