suchen

Heim  >  Artikel  >  Web-Frontend  >  Wie implementiert man einen Zufallsauswahleffekt in JavaScript? (Codebeispiel)

Wie implementiert man einen Zufallsauswahleffekt in JavaScript? (Codebeispiel)

青灯夜游
青灯夜游nach vorne
2018-10-16 16:49:435211Durchsuche

Wie erreiche ich einen zufälligen Auswahleffekt in JavaScript? In diesem Artikel erfahren Sie, wie Sie den Zufallsauswahleffekt in JavaScript erzielen (Codebeispiel). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Aus beruflichen Gründen habe ich eine kleine Webseite mit zufällig ausgewählten Personen geschrieben. Schauen wir uns zunächst die Darstellungen an.

Der Hintergrund ist auch dynamisch, aber ich bin beim Schreiben auf ein Problem gestoßen, das heißt, wenn ich eine Dynamik erzeuge Meteorschauer Wenn die Leinwand über der Bedienoberfläche zum Generieren von Zufallszahlen platziert wird, ist die Bedienoberfläche zum Generieren von Zufallszahlen nicht sichtbar.

Die Leinwand, die dynamische Spezialeffekte generiert, nimmt die Position von p in der Bedienoberfläche ein. Später habe ich p auf der Leinwand platziert und die Position von p so festgelegt, dass dies nicht der Fall ist Besetzen Sie die Position.

Ich weiß nicht, ob es für Sie eine andere Möglichkeit gibt, die JS-Animation als Hintergrund der Webseite festzulegen. Wenn jemand es weiß, lassen Sie es mich bitte wissen.

Anbei ist der Code für die gesamte Seite. 

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

Wenn etwas unangemessen ist, geben Sie mir bitte einen Rat.

Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter JavaScript-Video-Tutorial, jQuery-Video-Tutorial, Bootstrap-Tutorial!

Das obige ist der detaillierte Inhalt vonWie implementiert man einen Zufallsauswahleffekt in JavaScript? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Ein einfaches Beispiel für die Tab-Entwicklung (Code)Nächster Artikel：Ein einfaches Beispiel für die Tab-Entwicklung (Code)

In Verbindung stehende Artikel

Mehr sehen