基于Html+CSS+JS怎样实现手动放烟花效果(css,html,JS,开发技术)

效果展示

注意看有两种模式哦，可以自由切换，鼠标点哪里哪里有烟花，还可以自动放烟花

视频演示：html+css写一个烟花，源码请你直接拿走！

实现代码

Html

<divid="tips"><aid="manual"href="javascript:;"rel="externalnofollow"rel="externalnofollow">手动放烟花</a><aid="auto"href="javascript:;"rel="externalnofollow"rel="externalnofollow">自动放烟花</a></div>

Css

以下样式大部分是js代码渲染上dom后表现出来的

html,body{overflow:hidden;}body,div,p{margin:0;padding:0;}body{background:#000;font:12px/1.5arial;color:#7A7A7A;}a{text-decoration:none;outline:none;}#tips,#copyright{position:absolute;width:100%;height:50px;text-align:center;background:#171717;border:2pxsolid#484848;}#tips{top:0;border-width:002px;}#tipsa{font:14px/30pxarial;color:#FFF;background:#F06;display:inline-block;margin:10px5px0;padding:015px;border-radius:15px;}#tipsa.active{background:#FE0000;}#copyright{bottom:0;line-height:50px;border-width:2px00;}#copyrighta{color:#FFF;background:#7A7A7A;padding:2px5px;border-radius:10px;}#copyrighta:hover{background:#F90;}p{position:absolute;top:55px;width:100%;text-align:center;}

JavaScript

varfgm={on:function(element,type,handler){returnelement.addEventListener?element.addEventListener(type,handler,false):element.attachEvent("on"+type,handler)},un:function(element,type,handler){returnelement.removeEventListener?element.removeEventListener(type,handler,false):element.detachEvent("on"+type,handler)},bind:function(object,handler){returnfunction(){returnhandler.apply(object,arguments)}},randomRange:function(lower,upper){//产生范围在lower~upper的随机数returnMath.floor(Math.random()*(upper-lower+1)+lower)},getRanColor:function(){//随机获得十六进制颜色varstr=this.randomRange(0,0xFFFFFF).toString(16);while(str.length<6)str="0"+str;return"#"+str}};//初始化对象functionFireWorks(){this.type=0;this.timer=null;this.fnManual=fgm.bind(this,this.manual)}FireWorks.prototype={initialize:function(){clearTimeout(this.timer);fgm.un(document,"click",this.fnManual);switch(this.type){case1:fgm.on(document,"click",this.fnManual);break;case2:this.auto();break;};},manual:function(event){event=event||window.event;this.__create__({x:event.clientX,y:event.clientY});},auto:function(){varthat=this;that.timer=setTimeout(function(){that.__create__({x:fgm.randomRange(50,document.documentElement.clientWidth-50),y:fgm.randomRange(50,document.documentElement.clientHeight-150)})that.auto();},fgm.randomRange(900,1100))},__create__:function(param){//param即鼠标点击点（即烟花爆炸点）varthat=this;varoEntity=null;varoChip=null;varaChip=[];vartimer=null;varoFrag=document.createDocumentFragment();oEntity=document.createElement("div");with(oEntity.style){//烟花上升过程实体初始化position="absolute";//初始位置距网页顶部为：整个网页的高度（处于网页底部）top=document.documentElement.clientHeight+"px";left=param.x+"px";width="4px";height="30px";borderRadius="4px";background=fgm.getRanColor();};document.body.appendChild(oEntity);//window.setInterval方法该方法使得一个函数每隔固定时间被调用一次//console.log(param.y);oEntity.timer=setInterval(function(){//console.log(oEntity.offsetTop);//console.log(oEntity.style.top);oEntity.style.top=oEntity.offsetTop-20+"px";//判断烟花是否上升到或者第一次超过上次鼠标点击位置if(oEntity.offsetTop<=param.y){//烟花爆炸clearInterval(oEntity.timer);document.body.removeChild(oEntity);(function(){//在50-100之间随机生成碎片//由于IE浏览器处理效率低,随机范围缩小至20-30//自动放烟花时,随机范围缩小至20-30varlen=(/msie/i.test(navigator.userAgent)||that.type==2)?fgm.randomRange(20,30):fgm.randomRange(50,100)//产生所有烟花爆炸颗粒实体for(i=0;i<len;i++){//烟花颗粒形态实体oChip=document.createElement("div");with(oChip.style){position="absolute";top=param.y+"px";left=param.x+"px";width="4px";height="4px";overflow="hidden";borderRadius="4px";background=fgm.getRanColor();};oChip.speedX=fgm.randomRange(-20,20);oChip.speedY=fgm.randomRange(-20,20);oFrag.appendChild(oChip);aChip[i]=oChip};document.body.appendChild(oFrag);timer=setInterval(function(){for(i=0;i<aChip.length;i++){varobj=aChip[i];with(obj.style){top=obj.offsetTop+obj.speedY+"px";left=obj.offsetLeft+obj.speedX+"px";};obj.speedY++;//判断烟花爆炸颗粒是否掉落至窗体之外，为真则remove//splice()方法可删除从index处开始的零个或多个元素(obj.offsetTop<0||obj.offsetLeft<0||obj.offsetTop>document.documentElement.clientHeight||obj.offsetLeft>document.documentElement.clientWidth)&&(document.body.removeChild(obj),aChip.splice(i,1))};//判断烟花爆炸颗粒是否全部remove，为真则clearInterval(timer);!aChip[0]&&clearInterval(timer);},30)})()}},30)}};fgm.on(window,"load",function(){varoTips=document.getElementById("tips");varaBtn=oTips.getElementsByTagName("a");varoFireWorks=newFireWorks();fgm.on(oTips,"click",function(event){varoEvent=event||window.event;varoTarget=oEvent.target||oEvent.srcElement;vari=0;if(oTarget.tagName.toUpperCase()=="A"){for(i=0;i<aBtn.length;i++)aBtn[i].className="";switch(oTarget.id){case"manual":oFireWorks.type=1;break;case"auto":oFireWorks.type=2;break;case"stop":oFireWorks.type=0;break;}oFireWorks.initialize();oTarget.className="active";//阻止浏览器默认的事件冒泡行为oEvent.stopPropagation?oEvent.stopPropagation():oEvent.cancelBubble=true}});});fgm.on(document,"contextmenu",function(event){varoEvent=event||window.event;oEvent.preventDefault?oEvent.preventDefault():oEvent.returnValue=false});

关键代码，满满注释哦，这我可够意思了哈，不懂的话再私下问我吧。

进行声明。3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上

进行声明。3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上

css的全称是什么

css的全称是Cascading Style Sheets（层叠样式表），它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。