recherche

Maison  >  Article  >  interface Web  >  Comment implémenter l'effet de sélection aléatoire en JavaScript ? (exemple de code)

Comment implémenter l'effet de sélection aléatoire en JavaScript ? (exemple de code)

青灯夜游
青灯夜游avant
2018-10-16 16:49:435211parcourir

Comment obtenir un effet de sélection aléatoire en JavaScript ? Cet article vous présentera comment obtenir l'effet de sélection aléatoire en JavaScript (exemple de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

En raison de besoins professionnels, j'ai écrit une petite page Web de personnes sélectionnées au hasard. Jetons d'abord un coup d'œil aux rendus.

Le fond est également dynamique, mais j'ai rencontré un problème lors de son écriture, c'est-à-dire si je génère une dynamique pluie de météores Si la toile est placée au-dessus de l'interface d'opération pour générer des nombres aléatoires, l'interface d'opération pour générer des nombres aléatoires ne sera pas visible.

Le canevas qui génère des effets spéciaux dynamiques occupe la position de p dans l'interface d'opération. Plus tard, j'ai placé p au-dessus du canevas et j'ai défini la position de p pour qu'il ne le fasse pas. occupez le poste. Obtenez la bonne mise en page.

Je ne sais pas s'il existe un autre moyen de définir l'animation js comme arrière-plan de la page Web. Si quelqu'un le sait, faites-le-moi savoir.

Ci-joint le code de la page entière. 

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

S'il vous plaît, donnez-moi quelques conseils s'il y a quelque chose d'inapproprié.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo JavaScript, le Tutoriel vidéo jQuery, le Tutoriel bootstrap !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：Un exemple simple de développement d'onglets (code)Article suivant：Un exemple simple de développement d'onglets (code)

Articles Liés

Voir plus