<html> <body> <script type="text/javascript"> var d = new Date(); d.setFullYear(2015,11,29); d.setHours(14); d.setMinutes(0); d.setSeconds(0); d.setMilliseconds(0); document.write(d) </script> </body> </html>
function timeElapse(date){
var current = Date();
var old = date;
var seconds = (Date.parse(current) - Date.parse(date)) / 1000;
var days = Math.floor(seconds / (3600 * 24));
seconds = seconds % (3600 * 24);
var hours = Math.floor(seconds / 3600);
if (hours < 10) {
hours = "0" + hours;
}
seconds = seconds % 3600;
var minutes = Math.floor(seconds / 60);
if (minutes < 10) {
minutes = "0" + minutes;
}
seconds = seconds % 60;
if (seconds < 10) {
seconds = "0" + seconds;
}
var result = "<span class=\"digit\">" + old + "</span> days <span class=\"digit\">" + hours + "</span> hours <span class=\"digit\">" + minutes + "</span> minutes <span class=\"digit\">" + seconds + "</span> seconds";
$("#elapseClock").html(result);
}
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>网页标题随机显示名言JS代码</title> <SCRIPT type=text/javascript> //指定条目数 tips = new Array(5); //条目内容 tips[0] = ‘生活是不公平的，你要去适应它。‘; tips[1] = ‘送人玫瑰，手流余香。‘; tips[2] = ‘我们有不同的籍贯、不同的年龄、不同的习惯、不同的经历，但有一点我们是相同的，那就是都有一颗：爱心。‘; tips[3] = ‘锦上添花固然好,雪中送炭更可贵。‘; tips[4] = ‘伸出您的友爱之手,让更多的孩子重返校园。‘; index = Math.floor(Math.random() * tips.length); window.document.title += " - "+tips[index]; </SCRIPT> </head> <body> <p id="p1">请刷新查看网页的标题↑</p> <script> window.document.getElementById(‘p1‘).innerHTML= tips[index]; </script> </body> </html>
var Qixi = function() {
var confi = {
audio: {
enable: true,
playURl: "http://www.imooc.com/upload/media/happy.wav",
cycleURL: "http://www.imooc.com/upload/media/circulation.wav"
},
};
if (confi.audio.enable) {
var audio1 = Hmlt5Audio(confi.audio.playURl);
audio1.end(function() {
Hmlt5Audio(confi.audio.cycleURL, true)
})
}
function Hmlt5Audio(url, loop) {
var audio = new Audio(url);
audio.autoplay = true;
audio.loop = loop || false;
audio.play();
return {
end: function(callback) {
audio.addEventListener("ended", function() {
callback()
}, false)
}
}
}
};
$(function() {
Qixi()
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣诞主题</title>
<style type="text/css">
.bird {
min-width: 91px;
min-height: 71px;
top: 10%;
position: absolute;
z-index: 10;
background: url(http://img.mukewang.com/55ade1700001b38302730071.png)
}
.birdFly {
/**/
animation: bird-slow 400ms steps(3) infinite;
/*写法1: Firefox*/
-moz-animation: bird-slow 400ms steps(3) infinite;
/*写法2:Safari 和 Chrome*/
-webkit-animation-name: bird-slow;
-webkit-animation-duration: 400ms;
-webkit-animation-timing-function: steps(3);
-webkit-animation-iteration-count: infinite;
/*3:Opera*/
-o-animation-name: bird-slow;
-o-animation-duration: 400ms;
-o-animation-timing-function: steps(3);
-o-animation-iteration-count: infinite;
}
/*???*/
@keyframes bird-slow
{
0% {background-position-x: -0px}
100% {background-position-x: -273px}
}
@-moz-keyframes bird-slow /* Firefox */
{
0% {background-position-x: -0px}
100% {background-position-x: -273px}
}
@-webkit-keyframes bird-slow /* Safari and Chrome */
{
0% {background-position-x: -0px}
100% {background-position-x: -273px}
}
@-o-keyframes bird-slow /* Opera */
{
0% {background-position-x: -0px}
100% {background-position-x: -273px}
}
</style>
</head>
<body>
steps(3)实现帧动画
<div class="bird birdFly"></div>
</body>
<script type="text/javascript">
var docEl = document.documentElement,
resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
recalc = function() {
//设置根字体大小
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + ‘px‘;
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener(‘DOMContentLoaded‘, recalc, false);
</script>
</html>
animation:bird-slow 400ms steps(3) infinite;
@keyframes bird-slow {
0% {background-position-x: -0px}
100% {background-position-x: -273px}
}
<script type="text/javascript">
var docEl = document.documentElement,
resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
recalc = function() {
//设置根字体大小
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + ‘px‘;
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener(‘DOMContentLoaded‘, recalc, false);
</script>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>圣诞主题</title>
<style type="text/css">
.bird {
width: 3rem;
height: 3rem;
top: 10%;
position: absolute;
z-index: 10;
background: url(http://img.mukewang.com/55ade1700001b38302730071.png);
background-size: 300% 100%;
}
.birdFly {
/**/
animation: bird-slow 400ms steps(3) infinite;
/*写法1: Firefox*/
-moz-animation: bird-slow 400ms steps(3) infinite;
/*写法2:Safari 和 Chrome*/
-webkit-animation-name: bird-slow;
-webkit-animation-duration: 400ms;
-webkit-animation-timing-function: steps(3);
-webkit-animation-iteration-count: infinite;
/*3:Opera*/
-o-animation-name: bird-slow;
-o-animation-duration: 400ms;
-o-animation-timing-function: steps(3);
-o-animation-iteration-count: infinite;
}
/*???*/
@keyframes bird-slow
{
0% {background-position-x: -0rem}
100% {background-position-x: -9rem}
}
@-moz-keyframes bird-slow /* Firefox */
{
0% {background-position-x: -0rem}
100% {background-position-x: -9rem}
}
@-webkit-keyframes bird-slow /* Safari and Chrome */
{
0% {background-position-x: -0rem}
100% {background-position-x: -9rem}
}
@-moz-keyframes bird-slow /* Opera */
{
0% {background-position-x: -0rem}
100% {background-position-x: -9rem}
}
</style>
</head>
<body>
steps(3)实现帧动画
<div class="bird birdFly"></div>
</body>
<script type="text/javascript">
var docEl = document.documentElement,
resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
recalc = function() {
//设置根字体大小
docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + ‘px‘;
};
//绑定浏览器缩放与加载时间
window.addEventListener(resizeEvt, recalc, false);
document.addEventListener(‘DOMContentLoaded‘, recalc, false);
</script>
</html>
width: 3rem;
height: 3rem;
background-size: 300% 100%; /*9rem 3rem图片整体缩放*/
0% {background-position-x: -0rem}
100% {background-position-x: -9rem}
$(‘#lp‘).fadeOut(1000) //加载时间为1秒
原文：http://www.cnblogs.com/xyws/p/5089478.html