當(dāng)前位置：
首頁(yè) >
用javascript实现数字雨
發(fā)布時(shí)間：2025/4/16
31
豆豆
生活随笔
收集整理的這篇文章主要介紹了
用javascript实现数字雨
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
數(shù)字雨這個(gè)東西，無數(shù)人寫過了，我這個(gè)是上課無聊寫的版本，純屬娛樂，沒有經(jīng)過性能優(yōu)化的版本。
和別人不太一樣的是我這個(gè)版本用了ascii碼，數(shù)字會(huì)變化，就是性能不佳，懶得優(yōu)化。
和之前的太陽(yáng)系模型、小人互毆系統(tǒng)一樣都是拿來偽裝成動(dò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实现数字雨的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 用javascript实现简单的物质（密
- 下一篇： 用javascript制作随机汉字打字练