520 简单表白代码(JS)
2024-05-13 11:20:19
这两天不知道咋了，迷迷糊糊的，突然知道今天是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><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 = truei = 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.speedthis.value += this.directionthis.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 = 0this.value = 0this.radius = options.radiusthis.target = this.newTarget()this.direction = Math.sign(this.target)this.wander = options.wanderthis.speed = options.speed || 1}</script></body>
</html>转载于:https://www.cnblogs.com/Super-Lee/p/9064206.html
520 简单表白代码(JS)相关推荐
- ＜C语言＞简单表白代码小❤❤
这是一个简单的表白代码,运用了c语言的编译工具,因为很早之前百度来的,也不记得出处在哪里,注明:转载 #include <windows.h> //win头文件 #include<s ...
- HTML5七夕情人节表白网页(抖音-流动爱心表白)HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 爱心表白网页
HTML5七夕情人节表白网页❤抖音-流动爱心表白❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 爱心表白网页 这是程序员表白 ...
- HTML5七夕情人节表白网页(流星动画3D相册) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤流星动画3D相册❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是 ...
- HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页(星空萤火虫) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员 ...
- HTML5七夕情人节表白网页(雪花爱心表白) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤雪花爱心❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白 这是程序员表 ...
- HTML5七夕情人节表白网页(抖音超火3D炫酷魔方) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音超火❤3D炫酷魔方❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序 ...
- HTML5七夕情人节表白网页_生日快乐粒子烟花(自定义文字)_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤生日快乐粒子烟花(自定义文字)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css ...
- HTML5七夕情人节表白网页(抖音-罗盘时钟) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤抖音罗盘时钟❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白系列 ...
- HTML5七夕情人节表白网页(结婚倒计时) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白
HTML5七夕情人节表白网页❤结婚倒计时❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这是程序员表白 ...
- HTML5七夕情人节表白网页(粉色的情人节爱心飞出ui特效) HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心
HTML5七夕情人节表白网页❤粉色的情人节爱心飞出ui特效❤ HTML+CSS+JavaScript 求婚示爱代码 520情人节告白代码 程序员表白源码 3D旋转相册 js烟花代码 css爱心表白 这 ...
最新文章
- 石墨文档Websocket百万长连接技术实践
- 安装Phoenix时./sqlline.py执行报错File ./sqlline.py, line 27, in module import argparse ImportError: No ...
- poj 1113 Wall 凸包的应用
- VTK：可视化之BlobbyLogo
- 绝对震撼 7款HTML5动画应用及源码
- QEMU多进程(Multi-process QEMU)及vfio-user应用
- Photoshop工作笔记001---Photoshop常用快捷键总结
- python搭建邮件服务器地址_python 配置邮件发送服务器发送邮件
- n进制快速转化成10进制
- GDB使用小结- 可带参数
- eclipse没有server选项怎么解决
- Unix Windows
- Webview 非http或者https的网络请求拦截
- 77. 组合 - 递归
- css 文字不规则排版,DIV CSS解决不规则文字排版
- 纪一次笔试之行—燃烧的远征
- java vnc server_VNCServer 配置 及Vncview的使用
- 正则函数--search/match/findall/sub/split
- esp8266解析php,ESP8266 Bootloader开源代码解析之rboot（一）
- 天才小毒妃 第842章 真真是够了