前端小问题3

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、加载代码

demo

加载完成，退出加载

$('#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");
    });

demo

posted @ 2015-12-30 17:19 最后的武士阅读(450) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

最后的武士

前端小问题3

20%的功能满足80%的需求。爱、喜悦、和平。

1、js计算时间

手动获取某个时间点

注意点：得到的月份=实际月份+1

计算相隔时间

注意点：

1、parse() 方法可解析一个日期时间字符串，并返回 1970/1/1 午夜距离该日期时间的毫秒数。

2、Date.parse() 是 Date 对象的静态方法。

3、Date()函数值格式为 Tue Dec 29 2015 16:30:37 GMT+0800 (中国标准时间)

2、js输出

注意点：js输出，js代码要在输出的html代码之后

3、背景音乐代码

js代码

html引入js即可

4、关键帧动画

注意点

1、

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字体

6、自适应雪碧图

注意点

7、加载代码

加载完成，退出加载

又一段加载代码(page-loader)

index.html

style.css

theme.js

公告

为什么没有-273px，这个是steps的具体一个算法，具体可以参考我的博客深入理解CSS3 Animation 帧动画