<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>新年快乐</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="box">
<div class="bg">
<div class="bar">
<div class="bar-top">
<div class="bar-top-left"></div>
<div class="bar-top-right"></div>
</div>
<div class="bar-bottom">
<div class="bar-bottom-left"></div>
<div class="bar-bottom-right"></div>
</div>
</div>
<div class="bar">
<div class="bar-top">
<div class="bar-top-left"></div>
<div class="bar-top-right"></div>
</div>
<div class="bar-bottom">
<div class="bar-bottom-left"></div>
<div class="bar-bottom-right"></div>
</div>
</div>
<div class="bar">
<div class="bar-top">
<div class="bar-top-left"></div>
<div class="bar-top-right"></div>
</div>
<div class="bar-bottom">
<div class="bar-bottom-left"></div>
<div class="bar-bottom-right"></div>
</div>
</div>
<div class="bar">
<div class="bar-top">
<div class="bar-top-left"></div>
<div class="bar-top-right"></div>
</div>
<div class="bar-bottom">
<div class="bar-bottom-left"></div>
<div class="bar-bottom-right"></div>
</div>
</div>
<div class="bar">
<div class="bar-top">
<div class="bar-top-left"></div>
<div class="bar-top-right"></div>
</div>
<div class="bar-bottom">
<div class="bar-bottom-left"></div>
<div class="bar-bottom-right"></div>
</div>
</div>
<div class="bar">
<div class="bar-top">
<div class="bar-top-left"></div>
<div class="bar-top-right"></div>
</div>
<div class="bar-bottom">
<div class="bar-bottom-left"></div>
<div class="bar-bottom-right"></div>
</div>
</div>
<div class="bar">
<div class="bar-top">
<div class="bar-top-left"></div>
<div class="bar-top-right"></div>
</div>
<div class="bar-bottom">
<div class="bar-bottom-left"></div>
<div class="bar-bottom-right"></div>
</div>
</div>
<div class="bar">
<div class="bar-top">
<div class="bar-top-left"></div>
<div class="bar-top-right"></div>
</div>
<div class="bar-bottom">
<div class="bar-bottom-left"></div>
<div class="bar-bottom-right"></div>
</div>
</div>
<div class="bar">
<div class="bar-top">
<div class="bar-top-left"></div>
<div class="bar-top-right"></div>
</div>
<div class="bar-bottom">
<div class="bar-bottom-left"></div>
<div class="bar-bottom-right"></div>
</div>
</div>
<div class="bar">
<div class="bar-top">
<div class="bar-top-left"></div>
<div class="bar-top-right"></div>
</div>
<div class="bar-bottom">
<div class="bar-bottom-left"></div>
<div class="bar-bottom-right"></div>
</div>
</div>
<div class="bar">
<div class="bar-top">
<div class="bar-top-left"></div>
<div class="bar-top-right"></div>
</div>
<div class="bar-bottom">
<div class="bar-bottom-left"></div>
<div class="bar-bottom-right"></div>
</div>
</div>
<div class="bar">
<div class="bar-top">
<div class="bar-top-left"></div>
<div class="bar-top-right"></div>
</div>
<div class="bar-bottom">
<div class="bar-bottom-left"></div>
<div class="bar-bottom-right"></div>
</div>
</div>
</div>
<div class="fu-text">
<div class="left-rect"></div>
<div class="middle-rect"></div>
<div class="right-rect"></div>
<div class="bottom-rect">
<div class="trangle"></div>
</div>
</div>
</div>
<audio src="10966.mp3" preload="meta" loop autoplay id="bgmusic"></audio>
<div class="text-aool">
<span id="h5courseCom"></span>
</div>
<canvas id="screen" width="100%" height="100%"></canvas>
</body>
<script>
var bgmusic = document.getElementById('bgmusic');
bgmusic.addEventListener('canplay', function () {
bgmusic.play();
}, false);
window.addEventListener('load', function () {
window.addEventListener('touchstart', once, false);
}, false);
function once() {
bgmusic.play();
window.removeEventListener('touchstart', once, false);
}
var h5courseEle = document.getElementById('h5courseCom');
// 实例化时间对象
var date = new Date();
// 获取年份
var y = date.getFullYear();
// 获取月份
var m = date.getMonth() + 1;
// 获取日
var d = date.getDate();
var ss = y - 2008;//设定2008为初始年份
var ssc = ss % 12;
var ssyear = new Array("子鼠", "丑牛", "寅虎", "卯兔", "辰龙", "巳蛇", "午马", "未羊", "申猴", "酉鸡", "戌狗", "亥猪");
// 在网页中显示时间：
h5courseEle.innerHTML = y + '年是' + ssyear[ssc] + '年，祝您新年快乐、事事如意、财源广进！';
// + m + '月' + d + '日'
// Code by Matheus Lin
// While developing a version of "Chain Reaction", I ended up on
// those "fireworks-like" things. I leave it to you here.
// Chain Reaction coming up next!
// Configs
var screenWidth = window.innerWidth;
var screenHeight = window.innerHeight;
var minVx = -10;
var deltaVx = 20;
var minVy = 25
var deltaVy = 15;
var minParticleV = 5;
var deltaParticleV = 5;
var gravity = 1;
var explosionRadius = 200;
var bombRadius = 10;
var explodingDuration = 100;
var explosionDividerFactor = 10; // I couldn't find a better name. Got any?
var nBombs = 1; // initial
var percentChanceNewBomb = 5;
// Color utils forked from http://andreasstorm.com/
// (or someone who forked from there)
function Color(min) {
min = min || 0;
this.r = colorValue(min);
this.g = colorValue(min);
this.b = colorValue(min);
this.style = createColorStyle(this.r, this.g, this.b);
};
function colorValue(min) {
return Math.floor(Math.random() * 255 + min);
}
function createColorStyle(r, g, b) {
return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
}
// A Bomb. Or firework.
function Bomb() {
var self = this;
self.radius = bombRadius
新年快乐网页源码（含礼花烟花特效+福字旋转效果）纯canvas+css+js+html5
需积分: 0 177 浏览量
2023-01-22
07:48:41
上传
评论
收藏 1.58MB ZIP 举报
新年快乐网页源码（礼花+福字旋转效果）.zip （3个子文件） 
10966.mp3 1.6MB
index.html 15KB index.css 6KB资源评论
银河软件
- 粉丝: 0
- 资源: 1
