第二种JavaScript放烟花代码爆炸出图形

<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>第二种JavaScript放烟花代码爆炸出图形</title>

<script type="text/javascript">

var firework = function(){

this.size = 40;

this.speed = 0.1;

this.rise();

}

firework.prototype = {

color:function(){

var c = [‘0‘,‘3‘,‘6‘,‘9‘,‘c‘,‘f‘];

var t = [c[Math.floor(Math.random()*100)%6],‘0‘,‘f‘];

t.sort(function(){return Math.random()>0.5?-1:1;});

return ‘#‘+t.join(‘‘);

},

aheight:function(){

var h = document.documentElement.clientHeight;

return Math.abs(Math.floor(Math.random()*h-200))+201;

},

firecracker:function(){

var b = document.createElement(‘div‘);

var w = document.body.clientWidth;

b.style.color = this.color();

b.style.position = ‘absolute‘;

b.style.bottom = 0;

b.style.left = Math.floor(Math.random()*w)+1+‘px‘;

document.body.appendChild(b);

return b;

},

rise:function(){

var o = this.firecracker();

var n = this.aheight();

var speed = this.speed;

var e = this.expl;

var s = this.size;

var k = n;

var m = function(){

o.style.bottom = parseFloat(o.style.bottom)+k*speed+‘px‘;

k-=k*speed;

if(k<2){

clearInterval(clear);

e(o,n,s,speed);

}

}

o.innerHTML = ‘*‘;

if(parseInt(o.style.bottom)<n){

var clear = setInterval(m,20);

}

},

expl:function(o,n,s,speed){

var R = n/3;

var Ri = n/6;

var r = 0;

var ri = 0;

for(var i=0;i<s;i++){

var span = document.createElement(‘span‘);

var p = document.createElement(‘p‘);

span.style.position = ‘absolute‘;

span.style.left = 0;

span.style.top = 0;

span.innerHTML = ‘*‘;

p.style.position = ‘absolute‘;

p.style.left = 0;

p.style.top = 0;

p.innerHTML = ‘+‘;

o.appendChild(span);

o.appendChild(p);

}

function spr(){

r += R*speed;

ri+= Ri*speed/2;

sp = o.getElementsByTagName(‘span‘);

p = o.getElementsByTagName(‘p‘);

for(var i=0; i<sp.length;i++){

sp[i].style.left=r*Math.cos(360/s*i)+‘px‘;

sp[i].style.top=r*Math.sin(360/s*i)+‘px‘;

p[i].style.left=ri*Math.cos(360/s*i)+‘px‘;

p[i].style.top=ri*Math.sin(360/s*i)+‘px‘;

}

R-=R*speed;

if(R<2){

clearInterval(clearI);

o.parentNode.removeChild(o);

}

}

var clearI = setInterval(spr,20);

}

}

window.onload = function(){

function happyNewYear(){

new firework();

}

setInterval(happyNewYear,400);

}

</script>

<style type="text/css">

</style>

</head>

<body style="background:#000;font:12px Arial">

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

</body>

</html>

时间: 2024-08-29 08:05:19

第二种JavaScript放烟花代码爆炸出图形的相关文章

[java代码库]-简易计算器(第二种)

第二种方案:在程序中不使用if/switch……case等语句,完成计算器功能. <html> <head> <title>简易计算器</title> <script language="javascript">//易错:不是"text/javascript" function doCal(){ var value1=parseInt(document.getElementById("value1

程序员面试京东前端,现场JavaScript代码写出魔方特效

程序员面试京东前端,现场JS代码写出魔方特效,成功搞定20K月薪 今天小编我逛论坛,看到了一位程序员小伙子,因为是有了两年工作经验,然后去京东面试前端岗,一面二面轻松就过了,到了技术面这一块,小伙干脆就直接用JavaScript写了一个魔方特效,最终通过了面试,试用期12K,转正20K的工资水平,这特效看的小编也服气,主要是脑洞大,所以我也COPY了一份源码,分享给头条上的小伙伴学习. 完成之后的效果图如图所示: 完整源码分享给大家: 想要更多项目源码拿来练练手的可以复制下方群号→ web前端/

javascript——事件绑定第二种形式

 事件绑定第一种形式:obj.onclick = fn1; 给文档添加多个点击事件,后面会覆盖前面的事件,所以只有最后一个事件执行了. window.onload = function(){ function fn1(){alert('1');} function fn2(){alert('2');} function fn3(){alert('3');} document.onclick = fn1; document.onclick = fn2; document.onclick = fn3

Windows Socket五种I/O模型——代码全攻略(转)

Winsock 的I/O操作: 1. 两种I/O模式 阻塞模式:执行I/O操作完成前会一直进行等待,不会将控制权交给程序.套接字 默认为阻塞模式.可以通过多线程技术进行处理. 非阻塞模式:执行I/O操作时,Winsock函数会返回并交出控制权.这种模式使用 起来比较复杂,因为函数在没有运行完成就进行返回,会不断地返回 WSAEWOULDBLOCK错误.但功能强大.为了解决这个问题,提出了进行I/O操作的一些I/O模型,下面介绍最常见的三种: Windows Socket五种I/O模型——代码全攻

java web 第二课javascript

一.javascript概述: 1.javascript:客户端脚本语言 What:运行在浏览器上,纯文本的内容 Why:可以给网页添加交互功能,省事,省时间,省流量 交互:获取页面数据--浏览器处理数据--浏览器返回处理结果提示信息. 特点:类java和c对语法 自上向下解释执行 使用文本编写,直接嵌入HTML中执行 2.Javascript应用场景: 表单验证:客户端数据计算:特效动画 3.first javascript: 1).事件中:鼠标在浏览器中触发的操作: 如:单击,焦点转移,鼠标

js最基础知识回顾2(函数传参,操作属性的第二种方式,提取行间事件,操作一组元素,this,焦点问题和鼠标按下抬起,选项卡)

一.函数传参     1.函数传参:参数就是占位符----函数里定不下来的东西 a. var a1=function(){ alert(123); }; function a(f){ // 相当于 f=a1 f(); }; a(a1); b.  function skip(skipPath){  //换肤 var oLink1 = document.getElementById('link1'); oLink1.href=skipPath; } c.   function setStyle(na

javascript 容错处理代码(屏蔽js错误)

有时候大家来浏览网页的时候发现IE浏览器左下角总有个黄色错误标志,有时候更是直接弹出错误无法继续浏览页面,这样对于网站的正规性与权威性发展不利. 国外银行页面就是因为这样的错误,导致用户大量流失不敢用这个银行的网上银行等导致损失惨重. 所以一个想要在用户体验与公司实力上都是不容出现的错误,就是不影响使用也不能让用户反感,脚本之家一直致力于为大家提高更好的代码,所以这里我们将会大家整理一些常用的代码,使用方法什么,希望大家以后能越来越支持我们,让我们共同发展. 第一种:脚本之家自己也在用的 复制代

JavaScript 导出Excel 代码

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>WEB页面导出为EXCEL文档的方法</title> </head> <body> <table id=&

[书籍翻译] 《JavaScript并发编程》 第二章 JavaScript运行模型

本文是我翻译<JavaScript Concurrency>书籍的第二章 JavaScript运行模型,该书主要以Promises.Generator.Web workers等技术来讲解JavaScript并发编程方面的实践. 完整书籍翻译地址:https://github.com/yzsunlei/javascript_concurrency_translation .由于能力有限,肯定存在翻译不清楚甚至翻译错误的地方,欢迎朋友们提issue指出,感谢. 本书第一章我们探讨了JavaScri