最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

如何使用JS实现520代码

来源:懂视网 责编:小采 时间:2020-11-27 19:45:01
文档

如何使用JS实现520代码

如何使用JS实现520代码:这次给大家带来如何使用JS实现520代码,使用JS实现520代码的注意事项有哪些,下面就是实战案例,一起来看一下。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>
推荐度:
导读如何使用JS实现520代码:这次给大家带来如何使用JS实现520代码,使用JS实现520代码的注意事项有哪些,下面就是实战案例,一起来看一下。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>

这次给大家带来如何使用JS实现520代码,使用JS实现520代码的注意事项有哪些,下面就是实战案例,一起来看一下。

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>520</title>
 <style>
 html, body{padding:0px; margin:0px; background:#222; font-family: 'Karla', sans-serif; color:#FFF; height:100%; overflow:hidden;}
 canvas {width:100%; height:100%;}
 #text,#text_520{font-family:'楷体'; color:rgb(255,255,3); font-size:20px; position:fixed; left:10%; top:10%;}
 #text_520{font-size:100px; top:50%; left:50%;}
 img{position:fixed; top:0; left:0; width:100%;}
 #last{font-size:12px; bottom:10px; left:50%; position:fixed;}
 /*
 @keyframes drop {
 0% { 
 transform: translateY(-100px);
 opacity: 0;
 }
 90% {
 opacity: 1;
 transform:translateY(10px);
 }
 100% {
 transform:translateY(0px;)
 }
 }
 */
 </style>
 </head>
 <body>
 <canvas id="c"></canvas>
 <p id="text"></p>
 <p id="text_520">5 2 0</p>
 <img src="./timg.jpg" class="img" />
 <p id="last">版权所有:李晓珂</p>
 <script type="text/javascript" src="./jquery-1.11.0.min.js"></script>
 <script type="text/javascript">
 function isIE(){
 var u = navigator.userAgent;
 if((u.indexOf("compatible") > -1 && u.indexOf("MSIE") > -1) || (u.indexOf("Trident") > -1 && u.indexOf("rv:11.0") > -1)){
 alert("该浏览器暂不支持,请更换浏览器");
 window.open('','_self'); 
 window.close();
 }
 var audio = document.createElement("audio");
 audio.setAttribute("src","./520-love.mp3");
 audio.setAttribute("autoplay","autoplay");
 }
 isIE();
 </script>
 <script type="text/javascript">
 var textArr = [
 'I love three things in this world,',
 'the sun ,the moon and you.',
 'The sun for the day,',
 'the moon for the night,',
 'and you forever!',
 '',
 'If you were a teardrop,',
 'in my eye,',
 'for fear of losing you,',
 'I would never cry.',
 'And if the golden sun,',
 'should cease to shine its light,',
 'just one smile from you,',
 'would make my whole world bright.'
 ];
 var text_520 = document.getElementById('text_520');
 var height = (window.innerHeight - text_520.offsetHeight) / 2;
 var width = (window.innerWidth - text_520.offsetWidth) / 2;
 text_520.style.top = height + 'px';
 text_520.style.left = width + 'px';
 $('#text_520').hide();
 $('.img').hide();
 var m = 0;
 var n = 0;
 var text = document.getElementById('text');
 function typing(){
 if(m <= textArr[n].length) {
 text.innerHTML = text.innerHTML.substring(0,text.innerHTML.length-1) + textArr[n].substr(m++,1) + '_';
 setTimeout(typing,250);
 }else {
 if(n < textArr.length-1){
 text.innerHTML = text.innerHTML.substring(0,text.innerHTML.length-1) + "<br />_";
 n++;
 m = 0;
 typing();
 }else {
 text.innerHTML = text.innerHTML.substring(0,text.innerHTML.length-1);
 $('#text').fadeOut(5000);
 setTimeout(function(){$('#text_520').fadeIn(5000);},7000);
 setTimeout(function(){$('#text_520').fadeOut(5000); },7000);
 setTimeout(function(){$('.img').fadeIn(50000);},15000)
 }
 }
 }
 setTimeout(typing,5000);
 var ctx = document.querySelector('canvas').getContext('2d');
 ctx.canvas.width = window.innerWidth;
 ctx.canvas.height = window.innerHeight;
 var sparks = [];
 var fireworks = [];
 var walker;
 fireworks.pop();
 var i = 10;
 while(i--) fireworks.push(new Firework(Math.random()*window.innerWidth, window.innerHeight*Math.random()));
 // setInterval(render, 1000/50);
 render();
 function render() {
 setTimeout(render, 1000/50);
 ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 // 上升效果
 for(var firework of fireworks) {
 if(firework.dead) continue;
 firework.move();
 firework.draw();
 }
 // 绽放效果
 for(var spark of sparks) {
 if(spark.dead) continue;
 spark.move();
 spark.draw();
 }
 if(Math.random() < 0.1) fireworks.push(new Firework());
 //ctx.height = ctx.height;
 }
 function Spark(x, y, color) {
 this.x = x;
 this.y = y;
 this.dir = Math.random() * (Math.PI*2);
 this.dead = false;
 this.color = color;
 this.speed = Math.random() * 3 + 3;
 walker = new Walker({ radius: 20, speed: 0.25 });
 this.gravity = 0.25;
 this.dur = this.speed / 0.15;
 this.move = function() {
 this.dur--;
 if(this.dur < 0) this.dead = true;
 if(this.speed < 0) return;
 if(this.speed > 0) this.speed -= 0.15;
 walk = walker.step();
 this.x += Math.cos(this.dir + walk) * this.speed;
 this.y += Math.sin(this.dir + walk) * this.speed;
 this.y += this.gravity;
 this.gravity += 0.05;
 }
 this.draw = function() {
 drawCircle(this.x, this.y, 2, this.color);
 }
 }
 function Firework(x, y) {
 this.xmove = Math.random()*2 - 1;
 this.x = x || Math.random() * ctx.canvas.width;
 this.y = y || ctx.canvas.height;
 this.height = Math.random()*ctx.canvas.height/2;
 this.dead = false;
 this.color = randomColor();
 this.move = function() {
 this.x += this.xmove;
 if(this.y > this.height) this.y -= 4; 
 else this.burst();
 }
 this.draw = function() {
 drawCircle(this.x, this.y, 3, this.color)
 }
 this.burst = function() {
 this.dead = true
 i = 100; while(i--) sparks.push(new Spark(this.x, this.y, this.color));
 sparks.pop();
 }
 }
 setTimeout(function (){window.open('','_self').close();},175000);
/*
 // 清除两个数组
 function clear(){
 if(sparks!=null || fireworks!=null){
 sparks.pop();
 fireworks.pop();
 }
 var sparks = [];
 var fireworks = [];
 }
 setInterval(clear,100);
 */
 function drawCircle(x, y, radius, color) {
 color = color || '#FFF';
 ctx.fillStyle = color;
 ctx.fillRect(x-radius/2, y-radius/2, radius, radius);
 }
 function randomColor(){
 return ['#6ae5ab','#88e3b2','#36b89b','#7bd7ec','#66cbe1'][Math.floor(Math.random() * 5)];
 }
 function Walker(options){
 this.step = function(){
 this.direction = Math.sign(this.target) * this.speed
 this.value += this.direction
 this.target
 ? this.target -= this.direction
 : (this.value)
 ? (this.wander) 
 ? this.target = this.newTarget() 
 : this.target = -this.value
 : this.target = this.newTarget() 
 return this.direction
 }
 this.newTarget = function() {
 return Math.round(Math.random()*(this.radius*2)-this.radius)
 }
 this.start = 0
 this.value = 0
 this.radius = options.radius
 this.target = this.newTarget()
 this.direction = Math.sign(this.target)
 this.wander = options.wander
 this.speed = options.speed || 1
 }
 </script>
 </body>
</html>

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

JS实现最简单的查找、排序、去重算法

怎样使用基于Vue的延迟加载插件vue-view-lazy

文档

如何使用JS实现520代码

如何使用JS实现520代码:这次给大家带来如何使用JS实现520代码,使用JS实现520代码的注意事项有哪些,下面就是实战案例,一起来看一下。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>
推荐度:
标签: js 代码 520
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top