{"id":2684,"date":"2017-06-16T21:55:36","date_gmt":"2017-06-16T13:55:36","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=2684"},"modified":"2017-06-16T21:55:36","modified_gmt":"2017-06-16T13:55:36","slug":"js-%e7%83%9f%e8%8a%b1%e6%95%88%e6%9e%9c","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=2684","title":{"rendered":"JS \u70df\u82b1\u6548\u679c"},"content":{"rendered":"
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"utf-8\">\r\n<meta name=\"Author\" content=\"aoliann\">\r\n<title>un<\/title>\r\n<style type=\"text\/css\">\r\n*{margin:0;padding:0;}\r\nbody{\r\n    background: #000;\r\n    overflow: hidden;\r\n}\r\na{text-decoration: none;color:black;}\r\nli{list-style:none;}\r\n.firework{\r\n    position: absolute;\r\n    width:10px;\r\n    height:50px;\r\n    background:lightgreen;\r\n    border-radius: 50%;\r\n}\r\n.fires{\r\n    position: absolute;\r\n    width:8px;\r\n    height: 8px;\r\n    background: purple;\r\n    border-radius: 50%;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<script type=\"text\/javascript\">\r\nvar timer = null;\r\n\/\/\u751f\u6210\u5b50\u5f39\u8282\u70b9\r\ndocument.onclick = function(e){\r\n\r\nvar e = e || window.event; \/\/\u517c\u5bb9\u4f4e\u7248\u672cIE\r\nvar x = e.clientX,        \/\/\u83b7\u53d6X\u5750\u6807\r\n    y = e.clientY,       \/\/\u83b7\u53d6Y\u5750\u6807\r\n    h = window.innerHeight;   \/\/\u83b7\u53d6\u6d4f\u89c8\u5668\u9ad8\u5ea6\r\n   firework(x,y,h);          \/\/\u628a\u5f53\u524d\u9f20\u6807\u70b9\u51fb\u7684\u5750\u6807\u5f53\u505a\u5f62\u53c2\r\n};\r\n\/\/\u8ba9\u5b50\u5f39\u5230\u8fbe\u9f20\u6807\u70b9\u51fb\u7684\u4f4d\u7f6e\r\nfunction firework(x,y,h){\r\n\r\nvar oDiv = document.createElement('div'); \/\/ \u521b\u5efa\u4e00\u4e2adiv\u8282\u70b9\r\noDiv.className = 'firework';  \/\/\u7ed9\u521b\u5efa\u7684div\u6dfb\u52a0\u7c7b\u540d\r\noDiv.style.left = x + 'px';\r\noDiv.style.top = h + 'px';\r\noDiv.style.backgroundColor = color();\r\ndocument.body.appendChild(oDiv); \/\/\u628a\u521b\u5efa\u7684div\u8282\u70b9\u6dfb\u52a0\u5230body\u4e2d\r\nvar speed =10; \/\/\u81ea\u5b9a\u4e49\u7684\u901f\u5ea6\r\ntimer = setInterval(function(){\r\n oDiv.style.top = oDiv.offsetTop -speed +'px'; \/\/ \u6bcf30\u6beb\u79d2\u5728\u539f\u57fa\u7840\u7684\u4f4d\u7f6e\u5411\u4e0a\u51cf\u53bb10\r\n\r\n if(oDiv.offsetTop <= y){   \/\/\u5224\u65ad\u5b50\u5f39\u662f\u5426\u5230\u8fbe\u70b9\u51fb\u7684\u4f4d\u7f6e\r\n    clearInterval(timer);  \/\/\u5982\u679c\u5230\u8fbe\u4e86\u9f20\u6807\u70b9\u51fb\u7684\u4f4d\u7f6e\u6e05\u9664\u5b9a\u65f6\u5668 \u8ba9\u5b50\u5f39\u4e0d\u518d\u8fd0\u52a8\r\n    document.body.removeChild(oDiv); \/\/\u5220\u9664\u8fd9\u4e2a\u5b50\u5f39\u8282\u70b9\r\n\r\n\r\n    createFires(x,y,h);\r\n }\r\n\r\n},30)\r\n}\r\n\/\/\u751f\u6210\u70df\u82b1\r\nfunction createFires(x,y,h){\r\n\r\nvar n = Math.ceil(Math.random()*50) + 50; \/\/ \u751f\u6210\u968f\u673a\u70df\u82b1\u7c92\u5b50\u6570\u8303\u56f4(50-100\uff09\r\nvar fires = [];\/\/\u81ea\u5b9a\u4e49\u6570\u7ec4\u7528\u4e8e\u5b58\u50a8\u751f\u6210\u968f\u673a\u7684\u70df\u82b1\u7c92\u5b50\r\nfor(var i=0;i<n;i++){\r\n    fires[i] = document.createElement('div');\r\n    fires[i].className ='fires';\r\n    fires[i].style.left = x + 'px';\r\n    fires[i].style.top =  y + 'px';\r\n    fires[i].style.backgroundColor = color();\r\n    fires[i].speedX = Math.random() * 19 -9 ;\r\n    fires[i].speedY = Math.random() * 20 -8 ;\r\n    document.body.appendChild(fires[i]);\r\n}\r\n     setInterval(function(){\r\n      for(var i=0;i<n;i++){\r\n            fires[i].style.left = fires[i].offsetLeft + fires[i].speedX + 'px';\r\n            fires[i].style.top =  fires[i].offsetTop + fires[i].speedY + 'px';\r\n            fires[i].speedY += 0.6;\r\n\r\n            if(fires[i].offsetLeft < 0 || fires[i].offsetLeft > window.innerWidth || fires[i].offsetTop > h)\r\n            {\r\n            document.body.removeChild(fires[i]);\r\n            }\r\n        }\r\n    },30)\r\n}\r\n\/\/\u751f\u6210\u968f\u673a\u989c\u8272\r\nfunction color(){\r\n    var r = Math.floor(Math.random()*256);\r\n    var g = Math.floor(Math.random()*256);\r\n    var b = Math.floor(Math.random()*256);\r\n\r\n   return \"rgb(\"+r+\",\"+g+\",\"+b+\")\"\r\n\r\n}\r\n<\/script>\r\n<\/body>\r\n<\/html><\/pre>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » JS \u70df\u82b1\u6548\u679c<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta name=”Author”  […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[9,380],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2684"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2684"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2684\/revisions"}],"predecessor-version":[{"id":2685,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/2684\/revisions\/2685"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2684"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}