JavaScript写的随机选人真实案例

前端之家收集整理的这篇文章主要介绍了JavaScript写的随机选人真实案例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

JavaScript写的随机选人真实案例

随机选人的小网页,先看效果图。

生成动态流星雨的画布放到上生成随机数的操作界面之上的话,会看不到生成随机数的操作界面。

生成动态特效的canvas画布占了操作界面的div的位置,后来我将div放到画布的上面,又将div设置定位让其不占位置,才将布局弄好。

页面的代码

Meta java 文件

<span style="color: #008000">
<span style="color: #0000ff"><<span style="color: #800000">link <span style="color: #ff0000">rel<span style="color: #0000ff">="stylesheet"<span style="color: #ff0000">
href<span style="color: #0000ff">="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"<span style="color: #ff0000">
integrity<span style="color: #0000ff">="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"<span style="color: #ff0000">
crossorigin<span style="color: #0000ff">="anonymous"<span style="color: #0000ff">>

<span style="color: #008000">
<span style="color: #0000ff"><<span style="color: #800000">script
<span style="color: #ff0000">src<span style="color: #0000ff">="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"<span style="color: #ff0000">
integrity<span style="color: #0000ff">="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"<span style="color: #ff0000">
crossorigin<span style="color: #0000ff">="anonymous"<span style="color: #0000ff">></<span style="color: #800000">script<span style="color: #0000ff">>
<span style="color: #0000ff"></<span style="color: #800000">head<span style="color: #0000ff">>
<span style="color: #0000ff"><<span style="color: #800000">style<span style="color: #0000ff">><span style="background-color: #f5f5f5; color: #800000">
body <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">
overflow<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> hidden<span style="background-color: #f5f5f5; color: #000000">; <span style="background-color: #f5f5f5; color: #008000">/<span style="background-color: #f5f5f5; color: #008000">当内容溢出时,不显示<span style="background-color: #f5f5f5; color: #008000">/
<span style="background-color: #f5f5f5; color: #008000">/<span style="background-color: #f5f5f5; color: #008000"> background-image: url("image/流星雨.jpg"); <span style="background-color: #f5f5f5; color: #008000">/
<span style="background-color: #f5f5f5; color: #000000">}<span style="background-color: #f5f5f5; color: #800000">

.divv <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">
position<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> absolute<span style="background-color: #f5f5f5; color: #000000">;<span style="background-color: #f5f5f5; color: #ff0000">
top<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> 50px<span style="background-color: #f5f5f5; color: #000000">;<span style="background-color: #f5f5f5; color: #ff0000">
left<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> 42%<span style="background-color: #f5f5f5; color: #000000">;<span style="background-color: #f5f5f5; color: #ff0000">
width<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> 268px<span style="background-color: #f5f5f5; color: #000000">;<span style="background-color: #f5f5f5; color: #ff0000">
height<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> 600px<span style="background-color: #f5f5f5; color: #000000">;
<span style="background-color: #f5f5f5; color: #000000">}<span style="background-color: #f5f5f5; color: #800000">

num <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">

text-align</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; center</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
color</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; white</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
font-size</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 40px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>

<span style="background-color: #f5f5f5; color: #000000">}<span style="background-color: #f5f5f5; color: #800000">

.button <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">
text-align<span style="background-color: #f5f5f5; color: #000000">:<span style="background-color: #f5f5f5; color: #0000ff"> center<span style="background-color: #f5f5f5; color: #000000">;
<span style="background-color: #f5f5f5; color: #000000">}<span style="background-color: #f5f5f5; color: #800000">

img <span style="background-color: #f5f5f5; color: #000000">{<span style="background-color: #f5f5f5; color: #ff0000">

width</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 268px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span><span style="background-color: #f5f5f5; color: #ff0000"&gt;
height</span><span style="background-color: #f5f5f5; color: #000000"&gt;:</span><span style="background-color: #f5f5f5; color: #0000ff"&gt; 271px</span><span style="background-color: #f5f5f5; color: #000000"&gt;;</span>

<span style="background-color: #f5f5f5; color: #000000">}<span style="background-color: #f5f5f5; color: #800000">

canvas <span style="background-color: #f5f5f5; color: #000000">{

<span style="background-color: #f5f5f5; color: #000000">}
<span style="color: #0000ff"></<span style="color: #800000">style<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">body<span style="color: #0000ff">>

<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="divv"</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;img </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="img-thumbnail"</span><span style="color: #ff0000"&gt; alt</span><span style="color: #0000ff"&gt;="头像"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="img"</span><span style="color: #ff0000"&gt; src</span><span style="color: #0000ff"&gt;="image/yuan.jpg"</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="num"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;div </span><span style="color: #ff0000"&gt;class</span><span style="color: #0000ff"&gt;="button"</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;button </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="start"</span><span style="color: #ff0000"&gt; class</span><span style="color: #0000ff"&gt;="btn btn-success"</span><span style="color: #0000ff"&gt;></span>开始<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></span>
        <span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;button </span><span style="color: #ff0000"&gt;id</span><span style="color: #0000ff"&gt;="stop"</span><span style="color: #ff0000"&gt; class</span><span style="color: #0000ff"&gt;="btn btn-info"</span><span style="color: #0000ff"&gt;></span>结束<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;button</span><span style="color: #0000ff"&gt;></span>
    <span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>
<span style="color: #0000ff"&gt;</</span><span style="color: #800000"&gt;div</span><span style="color: #0000ff"&gt;></span>



<span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt;
        <canvas>画布 画板 画画的本子
    </span><span style="color: #008000"&gt;--></span>
<span style="color: #0000ff"&gt;<</span><span style="color: #800000"&gt;canvas </span><span style="color: #ff0000"&gt;width</span><span style="color: #0000ff"&gt;=400 </span><span style="color: #ff0000"&gt;height</span><span style="color: #0000ff"&gt;=400 </span><span style="color: #ff0000"&gt;style</span><span style="color: #0000ff"&gt;="background: #000000;"</span><span style="color: #ff0000"&gt; id</span><span style="color: #0000ff"&gt;="canvas"</span><span style="color: #0000ff"&gt;></</span><span style="color: #800000"&gt;canvas</span><span style="color: #0000ff"&gt;></span>

<span style="color: #008000"&gt;<!--</span><span style="color: #008000"&gt;
        javascript 画笔
    </span><span style="color: #008000"&gt;--></span>

<span style="color: #0000ff"></<span style="color: #800000">body<span style="color: #0000ff">>

<span style="color: #0000ff"><<span style="color: #800000">script <span style="color: #ff0000">type<span style="color: #0000ff">="text/javascript"<span style="color: #0000ff">>
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> num <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> document.getElementById(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">num<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> img <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> document.getElementById(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">img<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> start <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> document.getElementById(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">start<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> stop <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> document.getElementById(<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">stop<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">);
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> image <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> [ <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">image/XX.jpg<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">image/zXXn.jpg<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">image/XX.jpg<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">image/XX.jpg<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000"> ];
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> arr <span style="background-color: #f5f5f5; color: #000000">=<span style="background-color: #f5f5f5; color: #000000"> [ <span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">曹XX<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">赵XX<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">XX<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">李XX<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">马XX<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">,<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000">沈XX<span style="background-color: #f5f5f5; color: #000000">"<span style="background-color: #f5f5f5; color: #000000"> ];
<span style="background-color: #f5f5f5; color: #0000ff">var<span style="background-color: #f5f5f5; color: #000000"> intv <span style="background-color: #f5f5f5; color: #000000">= <span style="background-color: #f5f5f5; color: #0000ff">null<span style="background-color: #f5f5f5; color: #000000">;

start.onclick </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;() {

    </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;if</span><span style="background-color: #f5f5f5; color: #000000"&gt; (intv </span><span style="background-color: #f5f5f5; color: #000000"&gt;==</span><span style="background-color: #f5f5f5; color: #000000"&gt; undefined) {

        intv </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; setInterval(</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;() {
            </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; random </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; Math.floor(Math.random() </span><span style="background-color: #f5f5f5; color: #000000"&gt;*</span> <span style="background-color: #f5f5f5; color: #000000"&gt;6</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
            num.innerHTML </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; arr[random];
            img.src </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; image[random];
        },</span><span style="background-color: #f5f5f5; color: #000000"&gt;500</span><span style="background-color: #f5f5f5; color: #000000"&gt;);

    }

}

stop.onclick </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt;() {

    clearInterval(intv);

    intv </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #0000ff"&gt;null</span><span style="background-color: #f5f5f5; color: #000000"&gt;;

}

</span><span style="background-color: #f5f5f5; color: #008000"&gt;/*</span><span style="background-color: #f5f5f5; color: #008000"&gt; 下面是流星雨<a href="https://www.jb51.cc/tag/daima/" target="_blank" class="keywords">代码</a> </span><span style="background-color: #f5f5f5; color: #008000"&gt;*/</span>

<span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; canvas </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; document.getElementById(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;canvas</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; ctx </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; canvas.getContext(</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;2d</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; s </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; window.screen;
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; w </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; s.width;
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; h </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; s.height;
canvas.width </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; w;
canvas.height </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; h;
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; fontSize </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;14</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; clos </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; Math.floor(w </span><span style="background-color: #f5f5f5; color: #000000"&gt;/</span><span style="background-color: #f5f5f5; color: #000000"&gt; fontSize);
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; drops </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; [];
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; str </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;qwertyuiopasdfghjklzxcvbnm</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;for</span><span style="background-color: #f5f5f5; color: #000000"&gt; (</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; i </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;; i </span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt; clos; i</span><span style="background-color: #f5f5f5; color: #000000"&gt;++</span><span style="background-color: #f5f5f5; color: #000000"&gt;) {
    drops.push(</span><span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;);
}
</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;function</span><span style="background-color: #f5f5f5; color: #000000"&gt; drawString() {
    ctx.fillStyle </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;rgba(0,0.05)</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;
    ctx.fillRect(</span><span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;,</span><span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;,w,h);
    ctx.font </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;600 </span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span> <span style="background-color: #f5f5f5; color: #000000"&gt;+</span><span style="background-color: #f5f5f5; color: #000000"&gt; fontSize </span><span style="background-color: #f5f5f5; color: #000000"&gt;+</span> <span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;px 微软雅黑</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
    ctx.fillStyle </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;#00ff00</span><span style="background-color: #f5f5f5; color: #000000"&gt;"</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
    </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;for</span><span style="background-color: #f5f5f5; color: #000000"&gt; (</span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; i </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;; i </span><span style="background-color: #f5f5f5; color: #000000"&gt;<</span><span style="background-color: #f5f5f5; color: #000000"&gt; clos; i</span><span style="background-color: #f5f5f5; color: #000000"&gt;++</span><span style="background-color: #f5f5f5; color: #000000"&gt;) {
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; x </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; i </span><span style="background-color: #f5f5f5; color: #000000"&gt;*</span><span style="background-color: #f5f5f5; color: #000000"&gt; fontSize;
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;var</span><span style="background-color: #f5f5f5; color: #000000"&gt; y </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span><span style="background-color: #f5f5f5; color: #000000"&gt; drops[i] </span><span style="background-color: #f5f5f5; color: #000000"&gt;*</span><span style="background-color: #f5f5f5; color: #000000"&gt; fontSize;
        ctx.fillText(str[Math.floor(Math.random() </span><span style="background-color: #f5f5f5; color: #000000"&gt;*</span><span style="background-color: #f5f5f5; color: #000000"&gt; str.length)],x,y);
        </span><span style="background-color: #f5f5f5; color: #0000ff"&gt;if</span><span style="background-color: #f5f5f5; color: #000000"&gt; (y </span><span style="background-color: #f5f5f5; color: #000000"&gt;></span><span style="background-color: #f5f5f5; color: #000000"&gt; h </span><span style="background-color: #f5f5f5; color: #000000"&gt;&amp;&amp;</span><span style="background-color: #f5f5f5; color: #000000"&gt; Math.random() </span><span style="background-color: #f5f5f5; color: #000000"&gt;></span> <span style="background-color: #f5f5f5; color: #000000"&gt;0.99</span><span style="background-color: #f5f5f5; color: #000000"&gt;) {
            drops[i] </span><span style="background-color: #f5f5f5; color: #000000"&gt;=</span> <span style="background-color: #f5f5f5; color: #000000"&gt;0</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
        }
        drops[i]</span><span style="background-color: #f5f5f5; color: #000000"&gt;++</span><span style="background-color: #f5f5f5; color: #000000"&gt;;
    }

}
setInterval(drawString,</span><span style="background-color: #f5f5f5; color: #000000"&gt;30</span><span style="background-color: #f5f5f5; color: #000000"&gt;);

<span style="color: #0000ff"></<span style="color: #800000">script<span style="color: #0000ff">>

<span style="color: #0000ff"></<span style="color: #800000">html<span style="color: #0000ff">>

 

原文链接:https://www.f2er.com/js/238552.html

猜你在找的JavaScript相关文章