當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
用javascript实现数字雨
生活随笔
收集整理的這篇文章主要介紹了
用javascript实现数字雨
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
數(shù)字雨這個東西，無數(shù)人寫過了，我這個是上課無聊寫的版本，純屬娛樂，沒有經(jīng)過性能優(yōu)化的版本。
和別人不太一樣的是我這個版本用了ascii碼，數(shù)字會變化，就是性能不佳，懶得優(yōu)化。
和之前的太陽系模型、小人互毆系統(tǒng)一樣都是拿來偽裝成動態(tài)壁紙的。
<!DOCTYPE html> <html> <head><title>number rain</title> </head> <body style='background-color:black;margin:0;padding:0;width:100%;height:100%;overflow:hidden;'> <div id='div'></div> </body> <script type="text/javascript">function id(x){return document.getElementById(x)}function c(K){var t = document.createElement('div');t.innerHTML = String.fromCharCode(Math.round(Math.random()*128)-1);t.style = 'position:absolute;color:green;font-weight:bold;';t.style.left = 20*K + 'px';t.speed = 4+(Math.random()-0.5)*0.5;t.top = 0;id('div').appendChild(t);return t;}window.onload = function(){var w = window.innerWidth;var h = window.innerHeight;var nx = Math.round(w/20);var all = [];for(var j=0;j<50;j++){for(var i=0;i<nx;i++){all.push(c(i));}}function render(){for(var i=0;i<all.length;i++){all[i].top += all[i].speed;if(all[i].top>h+20){all[i].top = 20;all[i].speed = 4 + (Math.random()-0.5)*5;}all[i].style.top = all[i].top + 'px';if(Math.random()<0.1){all[i].innerHTML = String.fromCharCode(Math.round(Math.random()*128)-1);}all[i].style.color = 'rgb(0,'+Math.round((all[i].top*2)/h*255)+',0)';}requestAnimationFrame(render);}requestAnimationFrame(render);}</script> </body> </html>總結(jié)
以上是生活随笔為你收集整理的用javascript实现数字雨的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用javascript实现简单的物质（密
- 下一篇： 用javascript制作随机汉字打字练