倒计时H5页面源码(2018年除夕)

分类: php 发布时间: 2018-12-27 18:12 浏览: 500 次

1545904198

演示地址(PC端没做适配,使用手机扫码):http://aso.39gs.com/2019/index.html

全部源码下载:http://aso.39gs.com/2019/2019.rar
html全部源码:


<html>
 <head>
 <title>2018年除夕倒计时</title>
 <meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0;viewport-fit=cover">
 <style>
 body
 {
 background: #00FF00 url(bg2.jpg);

}
 body {
 /* 背景图垂直、水平均居中 */
 background-position: center center;
 /* 背景图不平铺 */
 background-repeat: no-repeat;
 /* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
 background-attachment: fixed;
 /* 让背景图基于容器大小伸缩 */
 background-size: cover;
 /* 设置背景颜色,背景图加载过程中会显示背景色 */
 background-color: #464646;
 }
 html, body {
 overflow: hidden;
 margin: 0;
 font-size: 32px;
 }

html {
 background: #14191C;
 }

p {
 position: absolute;
 bottom: 1em;
 width: 100%;
 color: rgba(255, 255, 255, 0.25);
 text-align: center;
 pointer-events: none;
 transition: opacity 1s ease-in-out;
 }
 </style>

<script type="text/javascript">
 function datetime_to_unix(datetime){
 var tmp_datetime = datetime.replace(/:/g,'-');
 tmp_datetime = tmp_datetime.replace(/ /g,'-');
 var arr = tmp_datetime.split("-");
 var now = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5]));
 return parseInt(now.getTime()/1000);
 }

window.onload=function(){
 setInterval(function(){second();},1000);
 pplay();
 }

function second(){
 var now = parseInt((new Date()).getTime()/1000);
 var off = datetime_to_unix("2019-2-4 0:0:0") - now;
 var day = parseInt(off/86400);
 var hours = parseInt(off%86400/3600);
 var min = parseInt(off%3600/60);
 var sec = parseInt(off%60);
 var str = day+"天"+hours+"时"+min+"分"+sec+"秒";
 document.getElementById("time").innerHTML = str;
 console.log(str);
 }

// start particle simulation
 simulate(
 '2d', {
 init: function() {

this.spray(150, function() {
 return [
 null,
 null,
 Vector.create(
 this.width * Math.random(),
 this.height * Math.random()
 ),
 Vector.random(1),
 .75 + (Math.random() * .5),
 100 * Math.random(), [
 this.behavior.cohesion(),
 this.behavior.alignment(),
 this.behavior.separation(),

this.behavior.limit(1 + Math.random()),

this.behavior.wrap(5),
 this.behavior.move()
 ]
 ]
 })

},
 tick: function() {

},
 beforePaint: function() {
 this.clear();
 },
 paint: function(particle) {

var p = particle.position;
 var v = particle.velocity;
 var s = particle.stimulated || 0;
 var l = particle.life;

this.paint.circle(p.x, p.y, v.magnitudeSquared, 'hsla(' + v.angle + ',100%,50%,1)');

},
 afterPaint: function() {
 // nothing
 },
 action: function(x, y) {

// disperse if near
 this.particles.forEach(function(p) {

if (Vector.distanceSquared(p.position, {
 x: x,
 y: y
 }) < 4000) {
 p.velocity.randomize(100);
 p.position.x += p.velocity.x;
 p.position.y += p.velocity.y;
 }

});

}
 }
 );
 // "simulate" particle simulation logic
 /**
 * Constants
 */
 PI_2 = Math.PI / 2;
 PI_180 = Math.PI / 180;

/**
 * Random
 */
 var Random = {
 between: function(min, max) {
 return min + (Math.random() * (max - min));
 }
 }

/**
 * 2D Vector Class
 */
 function Vector(x, y) {
 this._x = x || 0;
 this._y = y || 0;
 }

Vector.create = function(x, y) {
 return new Vector(x, y);
 };

Vector.add = function(a, b) {
 return new Vector(a.x + b.x, a.y + b.y);
 };

Vector.subtract = function(a, b) {
 return new Vector(a.x - b.x, a.y - b.y);
 };

Vector.random = function(range) {
 var v = new Vector();
 v.randomize(range);
 return v;
 };

Vector.distanceSquared = function(a, b) {
 var dx = a.x - b.x;
 var dy = a.y - b.y;
 return dx * dx + dy * dy;
 };

Vector.distance = function(a, b) {
 var dx = a.x - b.x;
 var dy = a.y - b.y;
 return Math.sqrt(dx * dx + dy * dy);
 };

Vector.prototype = {
 get x() {
 return this._x;
 },
 get y() {
 return this._y;
 },
 set x(value) {
 this._x = value;
 },
 set y(value) {
 this._y = value;
 },
 get magnitudeSquared() {
 return this._x * this._x + this._y * this._y;
 },
 get magnitude() {
 return Math.sqrt(this.magnitudeSquared);
 },
 get angle() {
 return Math.atan2(this._y, this._x) * 180 / Math.PI;
 },
 clone: function() {
 return new Vector(this._x, this._y);
 },
 add: function(v) {
 this._x += v.x;
 this._y += v.y;
 },
 subtract: function(v) {
 this._x -= v.x;
 this._y -= v.y;
 },
 multiply: function(value) {
 this._x *= value;
 this._y *= value;
 },
 divide: function(value) {
 this._x /= value;
 this._y /= value;
 },
 normalize: function() {
 var magnitude = this.magnitude;
 if (magnitude > 0) {
 this.divide(magnitude);
 }
 },
 limit: function(treshold) {
 if (this.magnitude > treshold) {
 this.normalize();
 this.multiply(treshold);
 }
 },
 randomize: function(amount) {
 amount = amount || 1;
 this._x = amount * 2 * (-.5 + Math.random());
 this._y = amount * 2 * (-.5 + Math.random());
 },
 rotate: function(degrees) {
 var magnitude = this.magnitude;
 var angle = ((Math.atan2(this._x, this._y) * PI_HALF) + degrees) * PI_180;
 this._x = magnitude * Math.cos(angle);
 this._y = magnitude * Math.sin(angle);
 },
 flip: function() {
 var temp = this._y;
 this._y = this._x;
 this._x = temp;
 },
 invert: function() {
 this._x = -this._x;
 this._y = -this._y;
 },
 toString: function() {
 return this._x + ', ' + this._y;
 }
 }

/**
 * Particle Class
 */
 function Particle(id, group, position, velocity, size, life, behavior) {

this._id = id || 'default';
 this._group = group || 'default';

this._position = position || new Vector();
 this._velocity = velocity || new Vector();
 this._size = size || 1;
 this._life = Math.round(life || 0);

this._behavior = behavior || [];

}

Particle.prototype = {
 get id() {
 return this._id;
 },
 get group() {
 return this._group;
 },
 get life() {
 return this._life;
 },
 get size() {
 return this._size;
 },
 set size(size) {
 this._size = size;
 },
 get position() {
 return this._position;
 },
 get velocity() {
 return this._velocity;
 },
 update: function(stage) {

this._life++;

var i = 0;
 var l = this._behavior.length;

for (; i < l; i++) {
 this._behavior[i].call(stage, this);
 }

},
 toString: function() {
 return 'Particle(' + this._id + ') ' + this._life + ' pos: ' + this._position + ' vec: ' + this._velocity;
 }
 }

// setup DOM
 function simulate(dimensions, options) {

// private vars
 var particles = [];
 var destroyed = [];
 var update = update || function() {};
 var stage = stage || function() {};
 var canvas;
 var context;

if (!options) {
 console.error('"options" object must be defined');
 return;
 }

if (!options.init) {
 console.error('"init" function must be defined');
 return;
 }

if (!options.paint) {
 console.error('"paint" function must be defined');
 return;
 }

if (!options.tick) {
 options.tick = function() {};
 }

if (!options.beforePaint) {
 options.beforePaint = function() {};
 }

if (!options.afterPaint) {
 options.afterPaint = function() {};
 }

if (!options.action) {
 options.action = function() {};
 }

if (document.readyState === 'interactive') {
 setup();
 } else {
 document.addEventListener('DOMContentLoaded', setup);
 }

// resizes canvas to fit window dimensions
 function fitCanvas() {
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 }

// create canvas for drawing
 function setup() {

// create
 canvas = document.createElement('canvas');
 document.body.appendChild(canvas);

// correct canvas size on window resize
 window.addEventListener('resize', fitCanvas);

// go
 go();
 }

// canvas has been attached, let's go!
 function go() {

// set initial canvas size
 fitCanvas();

// get context for drawing
 context = canvas.getContext(dimensions);

// simulation update loop
 function act() {

// update particle states
 var i = 0;
 var l = particles.length;
 var p;
 for (; i < l; i++) {
 particles[i].update(this);
 }

// clean destroyed particles
 while (p = destroyed.pop()) {

do {

// has not been found in destroyed array?
 if (p !== particles[i]) {
 continue;
 }

// remove particle
 particles.splice(i, 1);

} while (i-- >= 0)
 }

// repaint context
 options.beforePaint.call(this);

// repaint particles
 i = 0;
 l = particles.length;
 for (; i < l; i++) {
 options.paint.call(this, particles[i]);
 }

// after particles have been painted
 options.afterPaint.call(this);
 }

function tick() {

// call update method, this allows for inserting particles later on
 options.tick.call(this);

// update particles here
 act();

// on to the next frame
 window.requestAnimationFrame(tick);

}

/**
 * API
 **/
 function clear() {
 context.clearRect(0, 0, canvas.width, canvas.height);
 }

function destroy(particle) {
 destroyed.push(particle);
 }

function add(id, group, position, velocity, size, life, behavior) {
 particles.push(new Particle(id, group, position, velocity, size, life, behavior));
 }

function spray(amount, config) {
 var i = 0;
 for (; i < amount; i++) {
 add.apply(this, config());
 }
 }

function debug(particle) {
 this.paint.circle(
 particle.position.x,
 particle.position.y,
 particle.size,
 'rgba(255,0,0,.75)'
 );
 context.beginPath();
 context.moveTo(particle.position.x, particle.position.y);
 context.lineTo(particle.position.x + (particle.velocity.x * 10), particle.position.y + (particle.velocity.y * 10));
 context.strokeStyle = 'rgba(255,0,0,.1)';
 context.stroke();
 context.closePath();
 };

this.clear = clear;
 this.destroy = destroy;
 this.add = add;
 this.spray = spray;
 this.debug = debug;

this.paint = {
 circle: function(x, y, size, color) {
 context.beginPath();
 context.arc(x, y, size, 0, 2 * Math.PI, false);
 context.fillStyle = color;
 context.fill();
 },
 square: function(x, y, size, color) {
 context.beginPath();
 context.rect(x - (size * .5), y - (size * .5), size, size);
 context.fillStyle = color;
 context.fill();
 }
 }

this.behavior = {
 cohesion: function(range, speed) {
 range = Math.pow(range || 100, 2);
 speed = speed || .001;
 return function(particle) {

var center = new Vector();
 var i = 0;
 var l = particles.length;
 var count = 0;

if (l <= 1) {
 return;
 }

for (; i < l; i++) {

// don't use self in group
 if (particles[i] === particle || Vector.distanceSquared(particles[i].position, particle.position) > range) {
 continue;
 }

center.add(Vector.subtract(particles[i].position, particle.position));
 count++;
 }

if (count > 0) {

center.divide(count);

center.normalize();
 center.multiply(particle.velocity.magnitude);

center.multiply(.05);
 }

particle.velocity.add(center);

}
 },
 separation: function(distance) {

var distance = Math.pow(distance || 25, 2);

return function(particle) {

var heading = new Vector();
 var i = 0;
 var l = particles.length;
 var count = 0;
 var diff;

if (l <= 1) {
 return;
 }

for (; i < l; i++) {

// don't use self in group
 if (particles[i] === particle || Vector.distanceSquared(particles[i].position, particle.position) > distance) {
 continue;
 }

// stay away from neighbours
 diff = Vector.subtract(particle.position, particles[i].position);
 diff.normalize();

heading.add(diff);
 count++;
 }

if (count > 0) {

// get average
 heading.divide(count);

// make same length as current velocity (so particle won't speed up)
 heading.normalize();
 heading.multiply(particle.velocity.magnitude);

// limit force to make particle movement smoother
 heading.limit(.1);
 }

particle.velocity.add(heading);

}
 },
 alignment: function(range) {
 range = Math.pow(range || 100, 2);
 return function(particle) {

var i = 0;
 var l = particles.length;
 var count = 0;
 var heading = new Vector();

if (l <= 1) {
 return;
 }

for (; i < l; i++) {

// don't use self in group also don't align when out of range
 if (particles[i] === particle || Vector.distanceSquared(particles[i].position, particle.position) > range) {
 continue;
 }

heading.add(particles[i].velocity);
 count++;
 }

if (count > 0) {

heading.divide(count);
 heading.normalize();
 heading.multiply(particle.velocity.magnitude);

// limit
 heading.multiply(.1);

}

particle.velocity.add(heading);

}
 },
 move: function() {
 return function(particle) {
 particle.position.add(particle.velocity);

// handle collisions?

}
 },
 eat: function(food) {
 food = food || [];
 return function(particle) {

var i = 0;
 var l = particles.length;
 var prey;

for (; i < l; i++) {

prey = particles[i];

// can't eat itself, also, needs to be tasty
 if (prey === particle || food.indexOf(prey.group) === -1) {
 continue;
 }

// calculate force vector
 if (Vector.distanceSquared(particle.position, neighbour.position) < 2 && particle.size >= neighbour.size) {
 particle.size += neighbour.size;
 destroy(neighbour);
 }

}
 }
 },
 force: function(x, y) {
 return function(particle) {
 particle.velocity.x += x;
 particle.velocity.y += y;
 }
 },
 limit: function(treshold) {
 return function(particle) {
 particle.velocity.limit(treshold);
 }
 },
 attract: function(forceMultiplier, groups) {
 forceMultiplier = forceMultiplier || 1;
 groups = groups || [];
 return function(particle) {

// attract other particles
 var totalForce = new Vector(0, 0);
 var force = new Vector(0, 0);
 var i = 0;
 var l = particles.length;
 var distance;
 var pull;
 var attractor;
 var grouping = groups.length;

for (; i < l; i++) {

attractor = particles[i];

// can't be attracted by itself or mismatched groups
 if (attractor === particle || (grouping && groups.indexOf(attractor.group) === -1)) {
 continue;
 }

// calculate force vector
 force.x = attractor.position.x - particle.position.x;
 force.y = attractor.position.y - particle.position.y;
 distance = force.magnitude;
 force.normalize();

// the bigger the attractor the more force
 force.multiply(attractor.size / distance);

totalForce.add(force);
 }

totalForce.multiply(forceMultiplier);

particle.velocity.add(totalForce);
 }
 },
 wrap: function(margin) {
 return function(particle) {

// move around when particle reaches edge of screen
 var position = particle.position;
 var radius = particle.size * .5;

if (position.x + radius > canvas.width + margin) {
 position.x = radius;
 }

if (position.y + radius > canvas.height + margin) {
 position.y = radius;
 }

if (position.x - radius < -margin) {
 position.x = canvas.width - radius;
 }

if (position.y - radius < -margin) {
 position.y = canvas.height - radius;
 }

}
 },
 reflect: function(particle) {

return function() {

// bounce from edges
 var position = particle.position;
 var velocity = particle.velocity;
 var radius = particle.size * .5;

if (position.x + radius > canvas.width) {
 velocity.x = -velocity.x;
 }

if (position.y + radius > canvas.height) {
 velocity.y = -velocity.y;
 }

if (position.x - radius < 0) {
 velocity.x = -velocity.x;
 }

if (position.y - radius < 0) {
 velocity.y = -velocity.y;
 }
 }

},
 edge: function(action) {
 return function(particle) {

var position = particle.position;
 var velocity = particle.velocity;
 var radius = particle.size * .5;

if (position.x + radius > canvas.width) {
 action(particle);
 }

if (position.y + radius > canvas.height) {
 action(particle);
 }

if (position.x - radius < 0) {
 action(particle);
 }

if (position.y - radius < 0) {
 action(particle);
 }
 }
 }
 }

// public
 Object.defineProperties(this, {
 'particles': {
 get: function() {
 return particles;
 }
 },
 'width': {
 get: function() {
 return canvas.width;
 }
 },
 'height': {
 get: function() {
 return canvas.height;
 }
 },
 'context': {
 get: function() {
 return context;
 }
 }
 });

// call init method so the scene can be setup
 options.init.call(this)

// start ticking
 tick();

// start listening to events
 var self = this;
 document.addEventListener('click', function(e) {
 options.action.call(self, e.pageX, e.pageY);
 });

}

};
 </script>

</head>
 <body>
 <div style="display: none;">

<audio id="musicfc" style="width:0;height:0;display:none;" autoplay="autoplay" loop="loop" id="mp3">
 <source src="djs2.mp3" crossOrigin="anonymous" type="audio/mpeg">
 </audio>
 </div>
 <div style="width: 100%;margin: 60px 0 0 0;text-align: center;position: absolute;">
 <div style="color: #0D0301;width: 100%; text-align: center;position: relative;">距离除夕还有</div>
 <div style="color: #F6CB3F;width: 100%; text-align: center;position: relative;" id="time"> </div>
 </div>

<script type="text/javascript">
 function pplay(){
 var audio = document.getElementById('musicfc'),
 play = function(){
 audio.play();
 audio.volume = 1.0;
 document.removeEventListener("touchstart",play, false);
 };
 audio.play();
 document.addEventListener("WeixinJSBridgeReady", function () {
 play();
 }, false);
 document.addEventListener('YixinJSBridgeReady', function() {
 play();
 }, false);
 document.addEventListener("touchstart",play, false);
 }
 pplay();
 </script>

</body>
 </html>

&nbsp;

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!