search

Home >Web Front-end >JS Tutorial >How to implement random selection effect in JavaScript? (code example)

How to implement random selection effect in JavaScript? (code example)

青灯夜游
青灯夜游forward
2018-10-16 16:49:435246browse

How to achieve random selection effect in JavaScript? This article will introduce to you how to achieve the random selection effect in JavaScript (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Due to work needs, I wrote a small webpage for randomly selecting people. Let’s take a look at the renderings first.

The background is also dynamic, but I encountered a problem when writing it, that is, if the dynamic meteor shower is generated If the canvas is placed above the operation interface for generating random numbers, the operation interface for generating random numbers will not be visible.

The canvas that generates dynamic special effects occupies the position of p in the operation interface. Later, I placed p on top of the canvas and set the position of p so that it does not occupy the position. Get the layout right.

I don’t know if there is any other way for you to set js animation as the background of the web page. If anyone knows, please let me know.

Attached is the code for the entire page. 

<!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"); */}.pv {
    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>

    <p class="pv">
        <img class="img-thumbnail" alt="头像" id="img" src="image/yuan.jpg">
        <p id="num"></p>
        <p class="button">
            <button id="start" class="btn btn-success">开始</button>
            <button id="stop" class="btn btn-info">结束</button>
        </p>
    </p>



    <!--
            <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>

If there is something inappropriate, please give me some advice.

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's study. For more related tutorials, please visit JavaScript Video Tutorial, jQuery Video Tutorial, bootstrap Tutorial!

The above is the detailed content of How to implement random selection effect in JavaScript? (code example). For more information, please follow other related articles on the PHP Chinese website!

Statement：
This article is reproduced at:cnblogs.com. If there is any infringement, please contact admin@php.cn delete
Previous article：A simple example of tab development (code)Next article：A simple example of tab development (code)

Related articles

See more