JS實(shí)現(xiàn)520 表白簡單代碼
更新時(shí)間：2018年05月21日 09:53:06 作者：Blog_Lee
本文是小編基于js實(shí)現(xiàn)的520表白代碼，代碼簡單易懂非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
這兩天不知道咋了，迷迷糊糊的，突然知道今天是520的我，急急忙忙趕出個(gè)程序（新手，代碼有點(diǎn)亂），發(fā)出來大家一起研究下（參考百度的）。
<!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>
<div id="text"></div>
<div id="text_520">5 2 0</div>
<img src="./timg.jpg" class="img" />
<div id="last">版權(quán)所有：李曉珂</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("該瀏覽器暫不支持，請(qǐng)更換瀏覽器");
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);
/*
// 清除兩個(gè)數(shù)組
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>
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)520 簡單表白代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
在JavaScript中實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn)
這篇文章主要介紹了在JavaScript中實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
GoJs節(jié)點(diǎn)繪圖模板之go.Node使用示例詳解
這篇文章主要為大家介紹了GoJs節(jié)點(diǎn)繪圖模板go.Node使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
利用js的Node遍歷找到repeater的一個(gè)字段實(shí)例介紹
本文教大家使用js的Node遍歷找到repeater的一個(gè)字段的具體實(shí)現(xiàn)思路，感興趣的朋友可參考下，希望可以幫助到你2013-04-04
BootstrapValidator實(shí)現(xiàn)注冊(cè)校驗(yàn)和登錄錯(cuò)誤提示效果
這篇文章主要為大家詳細(xì)介紹了Bootstrap Validator實(shí)現(xiàn)注冊(cè)校驗(yàn)和登錄錯(cuò)誤提示效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Antd中Table列表行默認(rèn)包含修改及刪除功能的封裝方法
這篇文章主要介紹了Antd中Table列表行默認(rèn)包含修改及刪除功能的封裝,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
javascript 實(shí)現(xiàn)文本使用省略號(hào)替代（超出固定高度的情況）
這篇文章主要介紹了javascript 實(shí)現(xiàn)文本使用省略號(hào)替代（超出固定高度的情況）的相關(guān)資料,需要的朋友可以參考下2017-02-02
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)圖片裁剪上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
基于JS實(shí)現(xiàn)簡單的3D立方體自動(dòng)旋轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)簡單的3D立方體自動(dòng)旋轉(zhuǎn)的效果，文中的實(shí)現(xiàn)代碼講解詳細(xì)，感興趣的可以嘗試一下2022-06-06
javascript倒計(jì)時(shí)效果實(shí)現(xiàn)
這篇文章為大家分享了javascript倒計(jì)時(shí)效果實(shí)現(xiàn)代碼段，現(xiàn)今團(tuán)購網(wǎng)、電商網(wǎng)、門戶網(wǎng)等，常使用時(shí)間記錄重要的時(shí)刻，如時(shí)間顯示、倒計(jì)時(shí)差、限時(shí)搶購等，特別是雙十一活動(dòng)，需要的朋友可以參考下2015-11-11
純js實(shí)現(xiàn)頁面返回頂部的動(dòng)畫(超簡單)
下面小編就為大家?guī)硪黄僯s實(shí)現(xiàn)頁面返回頂部的動(dòng)畫(超簡單)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08