这是一篇关于一个程序员为未来女朋友制作的表白神器的博客。博主利用HTML5和JavaScript，创建了一个3D旋转的爱心图片墙，配合动态烟花效果和背景音乐，旨在营造浪漫的氛围。代码中包含一个动态的3D图片旋转展示，以及烟花特效，还有一段深情的信件，表达了博主对未来另一半的期待和承诺。此外，博客还包括了一个简单的音频播放器和文字转语音功能。
表单神器
动态效果图
介绍
目前还是单身狗，做的这个表单神器，就是为了有一天可以拿这个表白神器向我的那个她来表白。印象中每年的情人节，总是和春节的时间很接近，所以背景图中有红灯笼，绚烂的礼花，有可爱的雪人，显示的很喜庆，还有祝福的语句。这个表单神器的主要亮点就是旋转的桃心图片墙，可以放一些她美丽的图片，或者是属于你们俩的美好的瞬间，再放一个浪漫的背景音乐，这就很有氛围了。哈哈哈。我最喜欢的就是《告白气球》。放一下这首歌的歌词吧。
塞纳河畔 左岸的咖啡
我手一杯 品尝你的美
留下唇印的嘴
花店玫瑰 名字写错谁
告白气球 风吹到对街
微笑在天上飞
你说你有点难追
想让我知难而退
礼物不需挑最贵
只要香榭的落叶
喔～营造浪漫的约会
不害怕搞砸一切
拥有你就拥有 全世界
亲爱的 爱上你 从那天起
甜蜜的很轻易
亲爱的 别任性 你的眼睛
在说我愿意
塞纳河畔 左岸的咖啡
我手一杯 品尝你的美
留下唇印的嘴
花店玫瑰 名字写错谁
告白气球 风吹到对街
微笑在天上飞
你说你有点难追
想让我知难而退
礼物不需挑最贵
只要香榭的落叶
喔～营造浪漫的约会
不害怕搞砸一切
拥有你就拥有 全世界
亲爱的 爱上你 从那天起
甜蜜的很轻易
亲爱的 别任性 你的眼睛
在说我愿意
亲爱的 爱上你 恋爱日记
飘香水的回忆
一整瓶 的梦境 全都有你
搅拌在一起
亲爱的别任性 你的眼睛
在说我愿意
写给未来女朋友的一份信
虽然，目前还没有女朋友，但还是想给你写一份信。
未来的女朋友，抱歉，我都不知道你的名字，就叫你，小傻瓜吧。不知道你是怎么看待“傻”这个字的含义的，我一直觉得它是一个幸福的字，一个比较乐观的字，人们常说傻人有傻福。你看我就是那个傻人，在傻傻的等你这个小傻瓜，这辈子能遇到你，就是我的傻福吧。
很抱歉，这么晚才给你写这篇文章，或者是一封给你的信吧，总觉得信很有诗意，给自己爱的人写，是一件浪漫的事。信里写些什么呢？自己真没出息，一时之间不知道该说些什么。在没有写之前，有很多很多想对你说的话，此时此刻，正呆呆的想着你的模样，你一定很好看吧。其实，我的审美一直不错，能让我喜欢的女孩，肯定是非常漂亮的。哈哈。
你肯定会问有多么漂亮，我不知道怎么形容你的漂亮，反正在我眼中，你是最美的。在人山人海中，你的美让我刚好遇见你，刚好喜欢你，刚好想和你过一辈子，一切都是那么美好。
书上说不想结婚的谈恋爱，是耍流氓。放心了，我不会耍流氓的，我是抱着想娶你的目的来的。从一个人独自生活，到两个人一起生活，或多或少肯定会有不习惯的地方，需要彼此谦让，相互理解，两个人才能更好的在一起。我很想对你说，你不需要改，改了就不是你了，我会一直谦让你的，我来习惯你，但你忍心这么对我嘛，你那么善解人意，肯定不会的，对吧。所以彼此相互忍让一些，我肯定会忍让的多一些的，谁让我是男孩子呢。女孩子撒娇的时候应该是最可爱的样子，你如果想买什么东西的时候，对我撒娇，我肯定会投降的，尽量去满足你嘛，我挣下的钱，当然是给你花，让你开心的呀。但在一些原则性的问题上，希望你也能理解我，不要去触碰它，我会不开心的。
我喜欢自己做饭，虽然现在还没有什么可以拿的手的菜，但我正在学习，就是为了在遇见你的时候，可以让你尝尝我的手艺，我们可以一起做饭，聊一些家长里短的琐事，普普通通的就是幸福。当我们吵架的时候，你生气的不想给我做饭时，我可以自己做饭给自己吃，不用饿肚子，当然啦，我也会给你准备的。其实，这是我老妈经常教育我的，让我学做饭的时候常说的理由。你别担心啦，我老妈也是和我一样善良，很好相处的人，我相信你的妈妈也和你一样通情达理。我很看重亲情的，会对我们的家人一样好的。
两个人在一起的时候，肯定会吵架的，但我希望我们不要冷战，因为它是最伤感情的，有什么说什么嘛，我可能有时候听不进去。因为当我心烦的时候，身边还有人一直在叨叨，我会更不想听。当很激烈的时候，你稍微冷静一下，喝口水，润润嗓子哈，让我自己想想，我就会明白你说的有道理，会听取你的意见的。同样，我也会这样对你。如果我把你气哭了，你不要自己躲在房间里哭，一定要当着我的面哭，因为你的眼泪就是一把无形的小刀在刺痛我的心，我也会很难受的，我会想尽一切办法，让你出气，我舍不得让你哭，想把快乐带给你。
生活是平凡的，也是无味的，我想让我们的生活过的精彩丰富一些，当我们不想自己做饭时，会请你到浪漫的餐厅去吃一顿美味的大餐，周末也可以到公园里散散步，一年中也会留一些时间陪你去旅游，陪你做一些你想做的事情，有些事情你自己觉得都会幼稚，但是只要你开心就好。闲暇的时候，躺在阳光下，紧紧的靠着你，静静的看着你发呆。想和你一起看韩剧，以前是觉得里面的女主人公很漂亮，但现在你就是全天下最美的女人，陪你一起看韩剧里的帅气的男主人公。哈哈。
哇，真是想迫不及待的去见你，但你也别着急，好好照顾自己，我也会努力的让自己变得更加优秀，以自己最好的样子去见你，到时候，我们手牵手，永远不分开，好吗？
执子之手，与子偕老。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img_3D</title>
</head>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<!--烟花特效-->
<script>
var screeWidth;
var screeHeight;
var img;
var my_canvas;
var context;
var size = 3;
//弧度常量
var radis = Math.PI /180;
//精灵粒子,全局的
var spriteArray = new Array();
//创建烟花队列
var gloablYanhuaArray = new Array();
gloablYanhuaArray.push( YANHUAOBJ(800,400,50,size,0));
gloablYanhuaArray.push( YANHUAOBJ(200,400,50,size,1));
//gloablYanhuaArray.push( YANHUAOBJ(400,400,50,size));
$(function() {
// img = document.getElementById("tulip");
my_canvas=$("#myCanvas");
screeWidth = 1600;
screeHeight = 300;
$("#myCanvas").attr("width",screeWidth);
$("#myCanvas").attr("height",screeHeight);
my_canvas=my_canvas[0];
context=my_canvas.getContext("2d");
setInterval("draw()",80);
setInterval("explod()",500);
window.addEventListener( 'resize', onWindowResize, false );
});
function onWindowResize(){
}
function clearg(){
for(var i = 0; i< gloablYanhuaArray.length;i++){
if(gloablYanhuaArray[i].dead){
gloablYanhuaArray.splice(i,1);
}
}
}
function draw(){
//console.log("精灵总数："+spriteArray.length+",大烟花："+gloablYanhuaArray.length);
clearg();
context.clearRect(0,0,my_canvas.width,my_canvas.height);
context.fillStyle = "#fff";;
// context.fillText("当前烟花数："+gloablYanhuaArray.length+",当前粒子数："+spriteArray.length,100,100);
context.drawImage(getCatcheCanvas(),0,0,screeWidth,screeHeight);
}
//缓存绘图
function getCatcheCanvas(){
var canvas = document.createElement( 'canvas' );
canvas.width = screeWidth;
canvas.height = screeHeight;
var context = canvas.getContext( '2d' );
context.clearRect(0,0,canvas.width,canvas.height)
//绘制粒子
for(var j=0;j<spriteArray.length;j++){
var bb = spriteArray[j].color;
var color = bb.substring(0,bb.lastIndexOf(","))+","+spriteArray[j].alpha+")";
//var color = "rgba(255,255,255,"+spriteArray[j].alpha+")";
//color=spriteArray[j].color;
context.fillStyle = color
var csize = spriteArray[j].size;
context.beginPath();
context.fillRect(spriteArray[j].x-csize/2,spriteArray[j].y-csize/2,spriteArray[j].size,spriteArray[j].size);
//context.arc(spriteArray[j].x,spriteArray[j].y,spriteArray[j].size,0,Math.PI*2,true);
//context.drawImage(generateSprite(color,spriteArray[j].alpha),spriteArray[j].x,spriteArray[j].y,spriteArray[j].size,spriteArray[j].size)
//context.drawImage(document.getElementById("tulip"),spriteArray[j].x,spriteArray[j].y,25,25);
context.closePath();
context.fill();;
if(spriteArray[j].deaded){
spriteArray.splice(j,1);;
}
}
//绘制烟花
for(var j=0;j<gloablYanhuaArray.length;j++)//烟花队列
{
for(var i=0;i<gloablYanhuaArray[j].yanhuaArray.length;i++)//每个烟花
{
var bb = gloablYanhuaArray[j].yanhuaArray[i].color;
var color = bb.substring(0,bb.lastIndexOf(","))+","+gloablYanhuaArray[j].yanhuaArray[i].alpha+")";
context.fillStyle = "rgba(255,255,255,1)";
context.beginPath();
//context.arc(gloablYanhuaArray[j].yanhuaArray[i].x,gloablYanhuaArray[j].yanhuaArray[i].y,gloablYanhuaArray[j].yanhuaArray[i].size,0,Math.PI*2,true);
var csize = gloablYanhuaArray[j].yanhuaArray[i].size*5;
//context.fillRect(gloablYanhuaArray[j].yanhuaArray[i].x-csize/2,gloablYanhuaArray[j].yanhuaArray[i].y - csize/2,gloablYanhuaArray[j].yanhuaArray[i].size,gloablYanhuaArray[j].yanhuaArray[i].size);
//context.drawImage(img,gloablYanhuaArray[j].yanhuaArray[i].x,gloablYanhuaArray[j].yanhuaArray[i].y,25,25);
context.drawImage(generateSprite(color,1),gloablYanhuaArray[j].yanhuaArray[i].x-csize/2,gloablYanhuaArray[j].yanhuaArray[i].y-csize/2,csize,csize);
context.closePath();
context.fill();;
//context.arc(yanhuaArray[i].x, yanhuaArray[i].y, yanhuaArray[i].size, 0, Math.PI * 2, true);
//yanhuaArray[i].dirY+=0.5;
gloablYanhuaArray[j].yanhuaArray[i].update();
}
if(gloablYanhuaArray[j].deaded){
gloablYanhuaArray[j].splice(j,1);;
}
}
return canvas;
}
//生成烟花贴图
function generateSprite(colorStr,alpha) {
var canvas = document.createElement( 'canvas' );
canvas.width = 5;
canvas.height = 5;
//var color = colorStr.substring(0,colorStr.lastIndexOf(","))+","+alpha+")";
var color = colorStr;
var context = canvas.getContext( '2d' );
var gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
gradient.addColorStop( 0, 'rgba(255,255,255,1)' );
gradient.addColorStop( 0.3, 'rgba(255,255,255,1)' );
gradient.addColorStop( 0.4, color );
gradient.addColorStop( 1, 'rgba(0,0,0,0)' );
context.fillStyle = gradient;
context.fillRect( 0, 0, canvas.width, canvas.height );
return canvas;
}
//烟花对象
function YANHUAOBJ(x,y,count,size,colormain){
var yanhua = new Object();
yanhua.x = x;
yanhua.y = y;
yanhua.size = size;
yanhua.childCount = count;
yanhua.dead = false;
yanhua.yanhuaArray=new Array();
yanhua.alpha = 1;
yanhua.r = 255;
yanhua.g = 255;
yanhua.b = 255;
/*
var rand = Math.floor(Math.random()*3);
if(rand ==0){
yanhua.r = Math.floor(Math.random()*255);
}else if(rand ==1){
yanhua.g = Math.floor(Math.random()*255);
}else if(rand ==2){
yanhua.b = Math.floor(Math.random()*255);
}
*/
yanhua.color = "rgba("+yanhua.r+","+yanhua.g+","+yanhua.b+","+yanhua.alpha+")";
for(var i=0;i<yanhua.childCount;i++){
yanhua.yanhuaArray.push(YANHUA(yanhua.x,yanhua.y,yanhua.size,yanhua.color,colormain));
}
yanhua.update = setInterval(function(){
if(yanhua.alpha>0){
yanhua.alpha-=0.1;
}
for(var j=0;j<yanhua.yanhuaArray.length;j++){
if(yanhua.yanhuaArray[j].dead){
yanhua.yanhuaArray.splice(j,1);
}
}
if(yanhua.yanhuaArray.length == 0){
yanhua.dead = true;
clearInterval(yanhua.update);
}
},200);
return yanhua;
}
function YANHUA(x,y,size,color,colormain){
var yanhuaObj=new Object();
yanhuaObj.x=x,
yanhuaObj.y=y;
yanhuaObj.orgX=x;
yanhuaObj.orgY=y;
yanhuaObj.size=size;
yanhuaObj.v = (Math.random()*10); //爆炸初速度
yanhuaObj.a = 0.07;//爆炸加速度
yanhuaObj.angle = Math.floor(Math.random()*360) * radis;//随机弧度
yanhuaObj.vx = yanhuaObj.v * Math.cos(yanhuaObj.angle); //水平分速度
yanhuaObj.vy = yanhuaObj.v * Math.sin(yanhuaObj.angle);//垂直分速度
yanhuaObj.dirX=(Math.random()*10-5);
yanhuaObj.dirY=(Math.random()*10-5);
yanhuaObj.alpha = 1;
yanhuaObj.dead = false;
yanhuaObj.color = color;
yanhuaObj.flag = false;
yanhuaObj.r = 255;
yanhuaObj.g = 255;
yanhuaObj.b = 255;
yanhuaObj.colormain = colormain;
var step = 10;
var step1 = 20;
yanhuaObj.update=function(){
if(yanhuaObj.colormain ==0){
yanhuaObj.g -=step;
yanhuaObj.b -=step;
}else if(yanhuaObj.colormain ==1){
yanhuaObj.r -=step;
yanhuaObj.b -=step;
}else if(yanhuaObj.colormain ==2){
yanhuaObj.r -=step;
yanhuaObj.g -=step;
}else if(yanhuaObj.colormain ==3){
var rand = Math.floor(Math.random()*3);
if(rand ==0){
yanhuaObj.g -=step;
yanhuaObj.b -=step;
}else if(rand ==1){
yanhuaObj.r -=step;
yanhuaObj.b -=step;
}else if(rand ==2){
yanhuaObj.r -=step;
yanhuaObj.g -=step;
}
}
yanhuaObj.color = "rgba("+yanhuaObj.r+","+yanhuaObj.g+","+yanhuaObj.b+","+yanhuaObj.alpha+")";
if(yanhuaObj.size<=0){
yanhuaObj.flag=true;
}
if(yanhuaObj.size>0 && !yanhuaObj.flag){
yanhuaObj.size = yanhuaObj.size -0.5;
}else{
if(yanhuaObj.size<5){
yanhuaObj.size = yanhuaObj.size +0.4;
}
}
yanhuaObj.y+=0.4;
if(yanhuaObj.v>=0){
yanhuaObj.v += yanhuaObj.a-=0.02;
yanhuaObj.vx = yanhuaObj.v * Math.cos(yanhuaObj.angle); //水平分速度
yanhuaObj.vy = yanhuaObj.v * Math.sin(yanhuaObj.angle);//垂直分速度
var disR=(yanhuaObj.x-yanhuaObj.orgX)*(yanhuaObj.x-yanhuaObj.orgX)+(yanhuaObj.y-yanhuaObj.orgY)*(yanhuaObj.y-yanhuaObj.orgY);
if(disR<56000){
//yanhuaObj.dirX=yanhuaObj.dirX*2;
//yanhuaObj.dirY=yanhuaObj.dirY*2;
yanhuaObj.x+=yanhuaObj.vx;
yanhuaObj.y+=yanhuaObj.vy;
}else if(disR>56000){
yanhuaObj.x=yanhuaObj.orgX,
yanhuaObj.y=yanhuaObj.orgY;
yanhuaObj.UPDATE();
}
}else{
yanhuaObj.dead = true;
if(yanhuaObj.alpha>0){
//yanhuaObj.alpha-=0.001;
}else{
yanhuaObj.alpha=0;
}
}
}
//实现拖尾，每100毫秒产生一个尾巴
yanhuaObj.tail=setInterval(function(){
if(!yanhuaObj.dead){
spriteArray.push(sprite(yanhuaObj.x,yanhuaObj.y,yanhuaObj.size,yanhuaObj.color));
}else{
clearInterval(yanhuaObj.tail);
}
},50);
yanhuaObj.UPDATE = function(){
yanhuaObj.dirX=(Math.random()*10-5);
yanhuaObj.dirY=(Math.random()*10-5);
yanhuaObj.r = 255;
yanhuaObj.g = 255;
yanhuaObj.b = 255;
var rand = Math.floor(Math.random()*3);
if(rand ==0){
yanhuaObj.r = Math.floor(Math.random()*255);
}else if(rand ==1){
yanhuaObj.g = Math.floor(Math.random()*255);
}else if(rand ==2){
yanhuaObj.b = Math.floor(Math.random()*255);
}
yanhuaObj.color = "rgba("+yanhuaObj.r+","+yanhuaObj.g+","+yanhuaObj.b+","+yanhuaObj.alpha+")";
}
return yanhuaObj;
}
var mouseX;
var mouseY;
function mousemove(e){
e=e? e:window.event;
mouseY = e.clientY;
mouseX = e.clientX;
gloablYanhuaArray.push( YANHUAOBJ(mouseX,mouseY,10,size));
//spriteArray.push(sprite(mouseX,mouseY,50,"rgba(255,0,0,1)"));
//console.log("gloablYanhuaArray.length:"+gloablYanhuaArray.length);
//draw();
}
// function mousedown(e){
// e=e? e:window.event;
// mouseY = e.clientY;
// mouseX = e.clientX;
// gloablYanhuaArray.push( YANHUAOBJ(mouseX,mouseY,50,size));
// }
function explod(){
var border = 300;
var x = Math.random()*(screeWidth);
var y = Math.random()*(screeHeight);
var colormain = Math.floor(Math.random()*4);
gloablYanhuaArray.push( YANHUAOBJ(x,y,50,size,colormain));
}
function sprite(x,y,size,color){
var sprite=new Object();
sprite.g=5;
sprite.x=x,
sprite.y=y;
sprite.orgX=x;
sprite.orgY=y;
sprite.size=size;
sprite.color = color;
sprite.deaded = false;
sprite.alpha = 1;
sprite.r = 255;
sprite.g = 255;
sprite.b = 255;
var rand = Math.floor(Math.random()*3);
sprite.dead=setInterval(function(){
sprite.alpha = sprite.alpha-0.06;
sprite.size = sprite.size - 0.1;
sprite.alpha = sprite.alpha.toFixed(1);
if(sprite.alpha == 0){
sprite.deaded =true;
//console.log(sprite.deaded);
clearInterval(sprite.dead);
}
},120);
return sprite;;
}
</script>
<style type="text/css">
body{
background-image: url(yuandan.jpg);
background-size:100%;
background-repeat:no-repeat;
}
/*3d图片旋转*/
@keyframes an1{
0%{
transform: rotateY(0deg) ;
}
50%{
transform: rotateY(180deg) ;
}
100%{
transform: rotateY(360deg) ;
}
}
.container{
width: 900px;
height: 400px;
/*background: rgba(255,0,0,0.5);*/
/*opacity: 0.3;*/
margin: 0px auto 150px auto;
perspective: 2000px;
transform-style: preserve-3d;
animation: an1 10s linear 0s infinite;
}
.container img{
width: 200px;
height: auto;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
.container img:nth-child(1){
transform: rotateY(0deg) translateZ(350px);
}
.container img:nth-child(2){
transform: rotateY(36deg) translateZ(350px);
}
.container img:nth-child(3){
transform: rotateY(72deg) translateZ(350px);
}
.container img:nth-child(4){
transform: rotateY(108deg) translateZ(350px);
}
.container img:nth-child(5){
transform: rotateY(144deg) translateZ(350px);
}
.container img:nth-child(6){
transform: rotateY(180deg) translateZ(350px);
}
.container img:nth-child(7){
transform: rotateY(216deg) translateZ(350px);
}
.container img:nth-child(8){
transform: rotateY(252deg) translateZ(350px);
}
.container img:nth-child(9){
transform: rotateY(288deg) translateZ(350px);
}
.container img:nth-child(10){
transform: rotateY(324deg) translateZ(350px);
}
.myCanvas {
width: 1000px;
height: 100px;
}
</style>
<body>
<canvas id="myCanvas" class="myCanvas" onmousemove="mousemove();">
</canvas>
<h1 >春节快乐，祝你在新的一年里心想事成，笑口常开，越来越漂亮。</h1>
<div class="container">
<img src="image.png" >
<img src="image.png" >
<img src="image.png" >
<img src="image.png" >
<img src="image.png" >
<img src="image.png" >
<img src="image.png">
<img src="image.png">
<img src="image.png" >
<img src="image.png" >
</div>
<audio id="vd" preload="auto" loop="loop" >
<source src="2.mp3" type="audio/mpeg" />
</audio>
<audio id="zhid" >
<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=zh&ie=UTF-8&spd=5&per=1&text=春节快乐，祝你在新的一年里心想事成，笑口常开，越来越漂亮。" type="audio/mpeg">
<!--<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=en&ie=UTF-8&spd=1&per=1&text=Happy Chinese New Year, I wish you all the best in the new year, laughing and opening, more and more beautiful." type="audio/mpeg">-->
<!--<source id="tts_source_id" src="http://tts.baidu.com/text2audio?lan=fr&ie=UTF-8&spd=1&per=1&text=Joyeux Nouvel An chinois, je vous souhaite tout le meilleur dans la nouvelle année, rire et ouverture, de plus en plus belle." type="audio/mpeg">-->
</audio>
</body>
<script>
function snow() {
// 1、定义一片雪花模板
var flake = document.createElement('div');
// 雪花字符 ❄❉❅❆✻✼❇❈❊✥✺
flake.innerHTML = '❆';
flake.style.cssText = 'position:absolute;color:#fff;';
//获取页面的高度 相当于雪花下落结束时Y轴的位置
var documentHieght = window.innerHeight;
//获取页面的宽度，利用这个数来算出，雪花开始时left的值
var documentWidth = window.innerWidth;
//定义生成一片雪花的毫秒数
var millisec = 60;
//2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花；
setInterval(function() { //页面加载之后，定时器就开始工作
//随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置
var startLeft = Math.random() * documentWidth;
//随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置
var endLeft = Math.random() * documentWidth;
//随机生成雪花大小
var flakeSize = 25+ 20 * Math.random();
//随机生成雪花下落持续时间
var durationTime = 3000 + 7000 * Math.random();
//随机生成雪花下落 开始 时的透明度
var startOpacity = 0.7 + 0.3 * Math.random();
//随机生成雪花下落 结束 时的透明度
var endOpacity = 0.2 + 0.2 * Math.random();
//克隆一个雪花模板
var cloneFlake = flake.cloneNode(true);
//第一次修改样式，定义克隆出来的雪花的样式
cloneFlake.style.cssText += `
left: ${startLeft}px;
opacity: ${startOpacity};
font-size:${flakeSize}px;
top:-25px;
transition:${durationTime}ms;
`;
//拼接到页面中
document.body.appendChild(cloneFlake);
//设置第二个定时器，一次性定时器，
//当第一个定时器生成雪花，并在页面上渲染出来后，修改雪花的样式，让雪花动起来；
setTimeout(function() {
//第二次修改样式
cloneFlake.style.cssText += `
left: ${endLeft}px;
top:${documentHieght}px;
opacity:${endOpacity};
`;
//4、设置第三个定时器，当雪花落下后，删除雪花。
setTimeout(function() {
cloneFlake.remove();
}, durationTime);
}, 0);
}, millisec);
}
snow();
/*音频播放*/
var music = document.getElementById("vd");
function toggleSound() {
//获取ID
console.log(music);
console.log(music.paused);
if (music.paused) { //判读是否播放
// music.paused=false;
music.play(); //没有就播放
}
}
toggleSound();
setTimeout(function(){music.pause()},60000);
setTimeout(function(){music.play()},90000)
/*祝福语*/
function Greetings(){
var greet = document.getElementById("zhid");
if (greet.paused) { //判读是否播放
// greet.paused=false;
greet.play(); //没有就播放
}
}
setTimeout(Greetings,61000);
function changeColor(){
var color="#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray|#234|#534";//定义一条变换颜色的字符串
color=color.split("|"); //然后通过split方法进行分割
var xuan=document.getElementsByTagName("h1");
for(var i=0;i<xuan.length;i++){
xuan[i].style.color=color[parseInt(Math.random() * color.length)];//设置样式
}
}
setInterval("changeColor()",200);//死循环，每0.2秒变换一种颜色
</script>
</html>
扫一扫
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
