JS实现闪烁星空效果

<!-- <!DOCTYPE html> -->
<!-- 上面的声明文档类型 要去掉 -->
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {background-color: black;}</style>
<script type="text/javascript">var k=1;function xing(){var x=Math.floor(Math.random()*1024);var y=Math.floor(Math.random()*768);document.getElementById("star1").innerHTML="<div style='position:absolute;left:"+x+";top:"+y+";z-index:"+k+"'><img src='xing.gif' width=30px height=30px/></div>";x=Math.floor(Math.random()*1024);y=Math.floor(Math.random()*768);document.getElementById("star2").innerHTML="<div style='position:absolute;left:"+x+";top:"+y+";z-index:"+k+"'><img src='xing.gif' width=30px height=30px/></div>";x=Math.floor(Math.random()*1024);y=Math.floor(Math.random()*768);document.getElementById("star3").innerHTML="<div style='position:absolute;left:"+x+";top:"+y+";z-index:"+k+"'><img src='xing.gif' width=30px height=30px/></div>";x=Math.floor(Math.random()*1024);y=Math.floor(Math.random()*768);document.getElementById("star4").innerHTML="<div style='position:absolute;left:"+x+";top:"+y+";z-index:"+k+"'><img src='xing.gif' width=30px height=30px/></div>";x=Math.floor(Math.random()*1024);y=Math.floor(Math.random()*768);document.getElementById("star5").innerHTML="<div style='position:absolute;left:"+x+";top:"+y+";z-index:"+k+"'><img src='xing.gif' width=30px height=30px/></div>";k=k+1;// setTimeout("xing()",500);}
</script>
</head><!-- <body onload="xing()"> -->
<body onload="setInterval(xing,500)"><div id="star1"></div><div id="star2"></div><div id="star3"></div><div id="star4"></div><div id="star5"></div></body></html>

JS实现闪烁星空效果相关推荐

【小5聊】使用js+css+div布局方式画一棵圣诞树，带闪烁霓虹灯效果
虽然jQuery时代已经逐渐退出历史舞台,在拥抱vue的同时,也还是可以用jQuery锻炼下编程思维,毕竟比较灵活. 1.适合基础入门的前端小伙伴 2.适合使用jQuery锻炼实现前端效果小伙伴 3. ...
Canvas星空效果（JS面向对象）
概述更多Canvas实例可以看GitHub,不定时更新:https://github.com/xiangshuo1992/canvas-demo 这个Demo主要有以下几点可以讨论: 1.HTML5 ...
动态星空效果html,JS实现动态星空背景效果
本文实例为大家分享了JS实现动态星空背景的具体代码,供大家参考,具体内容如下这里我截取的是一个图片,实际上是会动的.废话不多说,上代码. HTML: CSS: /*css reset */ body ...
Leaflet中实现矩形闪烁动画效果
场景 Leaflet快速入门与加载OSM显示地图: Leaflet快速入门与加载OSM显示地图_霸道流氓气质的博客-CSDN博客_leaflet 显示地图在上面加载地图显示的基础上,实现矩形闪烁显示 ...
利用html实现文字闪烁的效果代码
利用html实现文字闪烁的效果代码单个元素设置闪烁效果多个元素设置闪烁效果网页中使文字闪烁的标签是什么,其实没有html标签可以直接让文字闪烁的,需要使用js脚本来实现. 单个元素设置闪烁效果 ...
vue中使用three绘制星空效果
文章目录一.Three.js 是什么? 二.使用步骤 1.引入库 2.开始绘制星空总结关于使用three绘制星空效果的记录一.Three.js 是什么? Three.js 是一款运行在浏览器中 ...
html5 星空,用canvas实现简单的星空效果
用canvas实现简单的星空效果因为日常被人说博客没文章所以就算只是写了个很简单的小星星也努力的把过程拼凑出来写个博客辣!(. Step.0 涉及到的所有的代码都放在了我的github上首先看一下 ...
高逼格UILabel的闪烁动画效果
高逼格UILabel的闪烁动画效果最终效果图如下: 源码: YXLabel.h 与 YXLabel.m // // YXLabel.h // // Created by YouXianMing o ...
php生成文字闪烁,如何用jquery实现闪烁文字效果
用jquery实现闪烁文字效果的方法:首先获取到最新一条记事的pid,并在添加成功后来闪动这条记事:然后闪动的方法可以写到函数里,直接调用:最后有闪动就要有定时器,开启定时器即可. 本教程操作环境:w ...

JS实现闪烁星空效果

JS实现闪烁星空效果相关推荐

最新文章

热门文章