JavaScript写的随机选人真实案例

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

新老客户大回馈,云服务器低至5折

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>

 

 

 

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:update layer tree导致页面卡顿

下一篇:给网页标题插入小图标