JS实现520 表白简单代码

时间：2021-05-26

这两天不知道咋了，迷迷糊糊的，突然知道今天是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;} </style> </head> <body> <canvas id="c"></canvas> <div id="text"></div> <div id="text_520">5 2 0</div> <img src="./timg.jpg" class="img" /> <div id="last">版权所有：李晓珂</div> <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 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>

总结

以上所述是小编给大家介绍的JS实现520 简单表白代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章