用JS写出星空-白红宇

用JS写出星空

阅读量：6955 次

发布时间：2019-06-27

本文共 3316 字，大约阅读时间需要 11 分钟。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--

body{

margin:0px;

padding:0px;

}

body,td{

font-size:9pt;

}

.star{

position:absolute;

width:1px;

height:1px;

font-size:0px;

background-color:#ffffff;

}

-->

</style>

<!--

try{

var winSize = {

width:document.documentElement.clientWidth,

height:document.documentElement.clientHeight

}

var MooSky = function(options){

this.options = options;

this.stars = new Array();

this.show = function(){

for(var i=0;i<this.options.num;i++){

var newStar = new MooStar({

container : this.options.container

});

newStar.fly();

this.stars[i] = newStar;

}

var MooStar = function(options){

this.options = options;

if(!!this.options.container){

this.container = document.getElementById(this.options.container);

}else{

this.container = document.body;

}

this.baseSpeed = 10;

var o = this;

this.speed = Math.round(Math.random()*this.baseSpeed)+1;

this.dom = document.createElement('DIV');

this.dom.className = 'star';

if(!!this.options.container){

var left = Math.round(Math.random()*this.container.offsetWidth-1);

var top = Math.round(Math.random()*this.container.offsetHeight-1);

this.dom.style.left = left+'px';

this.dom.style.top = top+'px';

this.container.appendChild(this.dom);

}else{

this.dom.style.left = Math.random()*winSize.width-1+'px';

this.dom.style.top = Math.random()*winSize.height-1+'px';

document.body.appendChild(this.dom);

}

MooStar.prototype.fly = function(){

if(this.dom.offsetLeft<0){

if(!!this.options.container){

var left = this.container.offsetWidth-1;

var top = Math.round(Math.random()*this.container.offsetHeight)-1;

this.dom.style.left = left+'px';

this.dom.style.top = top+'px';

}else{

this.dom.style.left = winSize.width-1+'px';

this.dom.style.top = Math.random()*winSize.height-1+'px';

}

}else{

var left = this.dom.offsetLeft-this.speed;

if(left<0) {

this.speed = Math.round(Math.random()*this.baseSpeed)+1;

if(!!this.options.container){

left = this.container.offsetWidth-1;

var top = Math.random()*this.container.offsetHeight-1;

this.dom.style.top = top+'px';

}else{

left = winSize.width-1;

}

this.dom.style.left = left+'px';

var self = this;

xywTimeout(function(){self.fly()},this.speed);

}

window.xywxff = function(){

var mooSky1 = new MooSky({

num:30,

container : 'skyContainer1' //如果不声明container，则是给document.body实现

});

mooSky1.show();

var mooSky2 = new MooSky({

num:20,

container : 'skyContainer2'

});

mooSky2.show();

//这是给body用的

var mooSky3 = new MooSky({

num:20

});

mooSky3.show();

}

window.onresize = function(){

winSize = {

width:document.documentElement.clientWidth,

height:document.documentElement.clientHeight

}

}catch(e){

alert(e.description);

}

//-->

</script>

</head>

</body>

</html>

转载于:https://my.oschina.net/u/1865851/blog/298716

你可能感兴趣的文章

Oracle awr报告生成操作步骤

查看>>

【DB2】DB2使用IMPORT命令导入含有自增长列的表报错处理

查看>>

微服务之springCloud-docker-comsumer(三)

查看>>

dhcpcd守护进程分析【转】

查看>>

Linux - 理不清的权限chmod与chown区别

Python安装pycurl失败，及解决办法

查看>>

cocos2d的常用动作及效果总结之四：Special Actions

查看>>

[ lucene扩展 ] MoreLikeThis 相似检索

查看>>

如果返回结构体类型变量（named return value optimisation，NRVO）

查看>>

C# 多线程详解 Part.02（UI 线程和子线程的互动、ProgressBar 的异步调用）

.NET开发技巧——从Winform穿越到WPF

查看>>

2135亿背后的双11项目协作怎么玩？

查看>>

DRDS SQL 审计与分析——全面洞察 SQL 之利器

查看>>

微信小程序：模板消息推送实现

查看>>

CodePush自定义更新弹框及下载进度条

查看>>