html结合JavaScript制作的霓虹灯

这里写代码片<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>霓虹灯</title><style>div{border: 1px solid #000000;/*设置一个黑色的边框 边框的像素为1*/position: absolute;/*定位*/margin: auto;/*设置浏览器的边距*/left: 0;/*左边的边距设置为0*/top: 0;/*上边的边距设置为0*/right: 0;/*右边的边距设置为0*/bottom: 0;/*下边的边距设置为0*/}/*调用ID边框div01，设置最外边的边框长和高为600像素，后面的每一个边框是上面的边框减掉50像素*/#div01{width: 600px;height: 600px;}#div02{width: 550px;height: 550px;}#div03{width: 500px;height: 500px;}#div04{width: 450px;height: 450px;}#div05{width: 400px;height: 400px;}#div06{width: 350px;height: 350px;}#div07{width: 300px;height: 300px;}#div08{width: 250px;height: 250px;}#div09{width: 200px;height: 200px;}#div10{width: 150px;height: 150px;}#div11{width: 100px;height: 100px;}</style>
</head>
<body><div id="div01"><!--设置边框的ID为div01--><div id="div02"><!--设置边框的ID为div02--><div id="div03"><!--设置边框的ID为div03--><div id="div04"><div id="div05"><div id="div06"><div id="div07"><div id="div08"><div id="div09"><div id="div10"><div id="div11"></div></div></div></div></div></div></div></div></div></div>
</div>
<!--JavaScript（Java脚本）代码的实现-->
<script>//定义数组实现（id的数组，颜色的数组）## 第一种方式单色跑一轮换色 ##var arrayDivId=["div01","div02","div03","div04","div05","div06","div07","div08","div09","div10","div11"];var arrayColor=["#00EE00","#050505","#0000AA","#1C86EE","#4B0082","#54FF9F","#66CDAA","#F08080","#FAFAFA","#FFFF00","#FF3030","#000000"];var i=11;var random=Math.floor(Math.random()*arrayColor.length);function fun() {i--;if(i<1){i=11;random=Math.floor(Math.random()*arrayColor.length);}document.getElementById("div0"+i).style.backgroundColor=arrayColor[random];}setInterval("fun()",10);//定义函数## 第二种方式多种颜色一起 ##
//第二种方式    /* function mfun() {//混合搭配，对于数组产生随机索引，两者的索引值，两次的效果不容易出现相同的情况var indexDivId=Math.floor(Math.random()*(arrayDivId.length));var indexColor=Math.floor(Math.random()*(arrayColor.length));//设置背景颜色，给div设置背景颜色，改变CSS样式， 可以使用JavaScript代码完成var xdiv=document.getElementById(arrayDivId[indexDivId]);xdiv.style.backgroundColor=arrayColor[indexColor];}//开启定时器，设置时间的毫秒值setInterval("mfun()",50);*/</script></body>
</html>

html结合JavaScript制作的霓虹灯相关推荐

用JavaScript 制作多彩的弹出式说明窗口
用JavaScript 制作多彩的弹出式说明窗口在设计网站的时候,在网站有重大的变动,或者需要作什么声明的时候,我们就要用到弹出窗口,这时只要我们一进入这个页面,就会弹出一个窗口,其实要制作这样的弹 ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个扁平化风格css螃蟹图形~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <! ...
js操作设置css动画,使用 CSS3 和 JavaScript 制作链接反转 3D 动画 - 文章教程
使用 CSS3 和 JavaScript 制作链接反转 3D 动画,CSS 和 JavaScript 技巧用来创建顶层的悬浮效果,使用 transfomr-origin 和 transform-sty ...
JavaScript制作动画
JavaScript制作动画 <!DOCTYPE html> <html> <style> #container {width: 400px;height: 400 ...
怎么使用javascript制作图片切换
** 怎么使用javascript制作图片切换 ** 轮播图在网页中是一个不可少的存在,其实只做起来还是相对而言还是比较简单的,来看看是怎么制作的. 这里是css的代码: #imgInfo,.clic ...
JavaScript制作的时钟
JavaScript制作的时钟分享一个自己制作的时钟.算是低级版的吧,秒钟分钟时钟都是可以获取到时间,根据时间来动的.是动态的. 效果图如下: 制作之前肯定要先把钟的各个部件画出来,然后加上样式,最 ...
javascript制作钟表
JAVAscript制作钟表本文用js制作一款简单的钟表练习代码如下欢迎大家交流,欢迎各位大佬指正. HTML部分 //创建钟表 <body> <div class=" ...
【web前端特效源码】使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3+JavaScript制作一个电风扇动画效果~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYP ...
CRM后台管理系统：HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面)
CRM后台管理系统:HTML+CSS+JavaScript制作企业网站后台管理系统模板网站(46个页面) 一款使用Bootstrap构建,多个主页版本的企业网站后台管理系统,咨询管理,数据统计后台管理 ...

html结合JavaScript制作的霓虹灯

html结合JavaScript制作的霓虹灯相关推荐

最新文章

热门文章