JS實現520表白代碼案例分析

來源：懂視網責編：小采時間：2020-11-27 19:47:46

JS實現520表白代碼案例分析

JS實現520表白代碼案例分析:這次給大家帶來JS實現520表白代碼案例分析，JS實現520表白代碼的注意事項有哪些，下面就是實戰案例，一起來看一下。這兩天不知道咋了，迷迷糊糊的，突然知道今天是520的我，急急忙忙趕出個程序（新手，代碼有點亂），發出來大家一起研究下（參考百度的）。&

推薦度：

點擊下載本文 文檔為doc格式

導讀JS實現520表白代碼案例分析:這次給大家帶來JS實現520表白代碼案例分析，JS實現520表白代碼的注意事項有哪些，下面就是實戰案例，一起來看一下。這兩天不知道咋了，迷迷糊糊的，突然知道今天是520的我，急急忙忙趕出個程序（新手，代碼有點亂），發出來大家一起研究下（參考百度的）。&

這次給大家帶來JS實現520表白代碼案例分析，JS實現520表白代碼的注意事項有哪些，下面就是實戰案例，一起來看一下。

這兩天不知道咋了，迷迷糊糊的，突然知道今天是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實現520表白代碼案例分析

推薦度：

點擊下載本文 文檔為doc格式

標簽：表白 js 代碼

熱門焦點

JS實現520表白代碼案例分析

JS實現520表白代碼案例分析

JS實現520表白代碼案例分析

最新推薦

猜你喜歡

熱門推薦