用JS写出星空

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>星空效果_www.jb51.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body{
margin:0px;
padding:0px;
}
body,td{
font-size:9pt;
}
.star{
position:absolute;
width:1px;
height:1px;
font-size:0px;
background-color:#ffffff;
}
-->
</style>
<script type="text/javascript">
<!--
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 scroll=no bgcolor=#000000>
<div id=‘skyContainer1‘ style="height:100px;background-color:#222222;overflow:hidden;font-size:70px;color:#FFFF00;font-weight:bolder">ABCD</div>
<div id=‘skyContainer2‘ style="position:absolute;left:200px;top:200px;width:500px;height:100px;background-color:#222222;"></div>
</body>
</html>

用JS写出星空

时间: 2024-10-06 03:30:21

用JS写出星空的相关文章

JS写出登陆遮罩层+浮动对联广告

用JS写出 遮罩层登陆框 和 对联广告 并自动跟随滚动条 滚动 保持让用户一直可以看到 好了,天色已晚废话不多说,代码特别详细 有注释,请看代码. ================> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

纯JS写出日历

封装代码: (function(cmf){ cmf.showDcalendar=function(){ var fnname=cmf.fn var id="cmfrili2" var yy=f23timeselecta1.value,mm=f23timeselecta2.value-1 var newdara=new Date() var dd=newdara.getDate(); var d=new Date(yy,mm,1),t if(mm==0){mm=12;yy--} var

js写出你的名字的拼音,判断哪个字母出现的最多

function fn(str) { var obj = {}; for (var i = 0; i < str.length; i++) { if (!obj[str.charAt(i)]) { obj[str.charAt(i)] = 1; } else { obj[str.charAt(i)]++; } } var value = ''; var count = 0; for (var i in obj) { if (obj[i] > count) { count = obj[i]; v

几点建议帮你写出简洁的JS代码

译者按: 规范的代码可以有效避免代码bug,fundebug才会报警少一点! 原文: Tips for Writing Cleaner Code 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用于学习. 我决定为初学者写一篇博客来介绍一些常见编程技巧,这些技巧可以帮助你写出更加规范,容易维护的代码. 1. 常量 这个问题哦不仅仅是写JavaScript的开发者们会遇到,在所有的开发语言中都要避免.我们来看一个例子: $elem.on('keyd

如何写出优雅的CSS代码 ?(转)

对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混乱,虽然表达出了最终的效果,然而却晦涩难懂,显然团队成员在读这样的代码时就显得无从下手,更不利于后期的维护了.那么如何写出优雅的代码呢?下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法,如有不妥,望批评指正. 如何整理一个项目. 如何写出清晰易懂的HTML代码. 如何写出优雅的css代

js写一个通讯录

模拟通讯录列表功能 我们手机上面的通讯录列表里面都有根据右侧的字母跳滚动到该字母的第一个名单地方. 于是我把这个功能拆分成两个功能区思考: 第一个是如何把这些名字的的汉字首字母提取出来,并且把相同字母的汉字归类,最后显示成列表. 第二是右侧字母导航,它需要一直固定在右侧,并且我按一个字母,屏幕最中间会弹出一个字母方框,代表我选中了这个字母. 我首先去实现第一个问题,如何提取名字中第一个汉字的首字母? 我去尝试过许多种方法,其中尝试过使用localeCompare(),我也成功的排序了,但是我发现

原生js写的一个弧形菜单插件

弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 1 var defaultPra = { 2 mainMenuId: "ArcMenu",//主菜单id 3 menuBoxId:"menuBox",//菜单包裹id 4 position: "",//弧形菜单 5 customPosition:"0

小程序初体验:手把手教你写出第一个小程序(一)

本文笔者将根据quick start中的范例代码,带大家简单地剖析一下小程序的运行方式,并介绍小程序开发中一些通用的特性,带着大家一步步写出自己的小程序. 适用对象:前端初学者,对小程序开发感兴趣者 tips:由于笔者也是一位前端菜鸟,所以尽量用简单直白的语言为大家讲解,如有说的不到位的地方,还望多多指教. 吊了我们一年胃口的小程序终于和大家见面了.经过了一天的发酵,小程序已经成为了今天的超级头条(汪汪哭晕在厕所). 经历了一天媒体对小程序的狂轰滥炸,相信大家对于小程序一定充满了好奇.与其跟风转

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------