20%的功能满足80%的需求。爱、喜悦、和平。
1、js计算时间
手动获取某个时间点
<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>
注意点:得到的月份=实际月份+1
计算相隔时间
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);
}
注意点:
1、parse() 方法可解析一个日期时间字符串,并返回 1970/1/1 午夜距离该日期时间的毫秒数。
2、Date.parse() 是 Date 对象的静态方法。
3、Date()函数值格式为 Tue Dec 29 2015 16:30:37 GMT+0800 (中国标准时间)
2、js输出
<!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>
注意点:js输出,js代码要在输出的html代码之后
3、背景音乐代码
js代码
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()
});
html引入js即可
4、关键帧动画
<!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>
注意点
1、
animation:bird-slow 400ms steps(3) infinite;
@keyframes bird-slow {
0% {background-position-x: -0px}
100% {background-position-x: -273px}
}
2、
通过定义一个类,类中定义的动画的一些关键数据,比如动画名,时间,次数,切换的位置
通过keyframes定义动画具体执行参数与时间段
steps(3)的意思就是:keyframes设置的0%-100%的段中,background-position的的x坐标会变化3次
steps会平分这些段落值,其变化值就是
background-position-x: -0px
background-position-x: -91px
background-position-x: -182px
为什么没有-273px,这个是steps的具体一个算法,具体可以参考我的博客 深入理解CSS3 Animation 帧动画
5、自适应rem布局
设置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>
6、自适应雪碧图
<!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}
7、加载代码
加载完成,退出加载
$('#lp').fadeOut(1000) //加载时间为1秒
又一段加载代码(page-loader)
index.html
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ino Soon- Responsive Coming Soon Template</title>
<meta name="description" content="Responsive Coming Soon Template">
<meta name="keywords" content="HTML5, Bootsrtrap, Responsive, Template, Under Construction" />
<meta name="author" content="imransdesign.com">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="page-loader"></div> <!-- Display loading image while page loads -->
<!--===== Begin Header =====-->
<!-- Theme JS -->
<script src="js/theme.js"></script>
</body>
</html>
style.css
.page-loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 99999;
background: #FFF url(../img/page-loader.gif) center center no-repeat;
}
theme.js
/* ------------------------------------------------------------------------ */
/* Audio
/* ------------------------------------------------------------------------ */
$("#jquery_jplayer_1").jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
mp3: "www.example.com/demo.mp3"
}).jPlayer("play");
var click = document.ontouchstart === undefined ? 'click' : 'touchstart';
var kickoff = function () {
$("#jquery_jplayer_1").jPlayer("play");
document.documentElement.removeEventListener(click, kickoff, true);
};
document.documentElement.addEventListener(click, kickoff, true);
},
swfPath: "/js",
loop: true,
});
//以上代码仅仅是为了让页面无法加载完成
/* ------------------------------------------------------------------------ */
/* PageLoader
/* ------------------------------------------------------------------------ */
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$(".page-loader").fadeOut("slow");
});