前端小问题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秒

时间： 2024-10-06 03:17:31

前端小问题3的相关文章

前端小知识点积累

作为一名前端,一直想说,一入前端深似海啊.也许在很多人眼中,前端就是简简单单的写页面的,但实际上前端的水还都是很深的,具体就不做叙述了. 今天来的主要目的是分享平时积累的一些前端小知识一:js,jq获取各种高度 Javascript: alert(window.screenTop); //浏览器距离Top alert(window.screenLeft); //浏览器距离Left alert(window.scre

web前端小知识点

写在前面: 该篇是个人平时对web前端小知识点的总结,会不定时更新...... 如有错误,敬请批评指正. 正文: 1.WWW是World Wide Web的缩写. 2.HTML(Hyper Text Markup Language)是用于描述网页文档的超文档标记性语言. 3.Web主要包括超文本传输协议(HTTP).统一资源定位符(URL)以及超文本标记语言HTML组成. 4.HTTP是客户端和服务器端信息交互的网络协议. 5.URL是网络上的资源的唯一标识符,俗称网址. 6.文本.图像.超级链

Popush前端小优化-邹豪风

[实现篇] 实现功能实现Popush用户注册后自动登录功能. 实现思路阅读Popush代码的前端部分,主要观察了Views中关于注册和登录两个部分向后台传递数据的方式.发现该项目前后端交互的机理是:客户端利用socket.emit发送数据到服务器端,服务器端利用socket.on进行事件响应并处理相关数据. 客户端发送数据: 1 app.socket.emit('register', { 2 name: name, 3 password: pass, 4 }); 服务器端响应: 1 sock

Popush之前端小功能实现+小组作业总结

刘峻琳本次作业是软件工程(3)这门课真正意义上的第一次团队作业.尽管大家都或多或少遇到了一些阻碍,但总的来说,从拿到题目到分工到各自完成自己的任务,整个过程都较为顺利. 我个人在这次作业的任务是负责阅读前端代码,并在此基础之上实现注册之后自动登录的功能.根据助教的提示,我首先大致看了一下Backbone框架的介绍,然而诚如任何一种框架结构,Backbone实在是博大精深,短时间内得其要领几乎不太现实.但这并不妨碍我们去实现需要的功能,我们只需要知道Backbone将WEB应用分成Models.

bootstrap你让前端小狮子们又喜又恨

看了一个用bootstrap框架建的页面,简直方便至极!各种添加类就可以实现各种功能,各种添加data-toggle让你不需要懂javascript就可以做出很炫的效果! 最重要的它做出来的页面还是响应式的!让我们苦逼小狮子一行一行敲代码的情何以堪! 瞬间觉着自己弱爆了,再不学点知识看来是真的该没有饭吃了! 那么接下来问题来了!bootstrap入门如此之低岂不是人人可学人人可用,将来会不会发展成前端跟网站编辑工作一样的简单呢,这个让我纠结了!

前端--小程序的学习（二）

今天呢,我们一起来看看小程序的wxml,其实呢就跟前端写html一样的,只不过这里标签不一样,并且头部head部分也不用写,因为小程序内在都包好了. wxml基本由这几个标签数据绑定类似于Vue的数据绑定("{{value}} "绑定数据),数据初始化时在js文件的Page()函数里的data对象中. 以下是常用的标签: view标签:视图标签,默认换行,类似于div标签,块级元素: icon标签:展示图标 type属性用于展示什么样的图标如:clear,success,info,w

VALIDFORM前端小插件实现表单验证；

好开心啊,有了这个小插件就不用在服务器端去写用户输入的东西是否合法,又美观: 这个是官网,使用入门那儿很简单,不如直接改demo; 下载的demo就是这个: 小李子(永奇商城注册页面表单验证): 就是这个,那个邮箱正则验证效果如何加上去的呢: 看demo就知道(把demo里面之中整个demo文件夹拷贝在项目之中,将css之中validform必须的留下,其他删除掉,也就是demo文件夹里面/*==========以下部分是Validform必须的===========*/这一行字下面的css样式

研途路漫漫，写几个前端小项目压压惊

统一访问地址:http://tangzhirong.github.io/ 轮播图组件:https://github.com/tangzhirong/sass-slider 日历组件:https://github.com/tangzhirong/jquery-calendar 浮出层组件:https://github.com/tangzhirong/popUpper 表单组件:https://github.com/tangzhirong/form-constructor 行星与飞船:https:/

你不一定知道的几个前端小知识

1 大家都知道js在进行小数运算时会有丢失精度问题(其他语言也是),比如: 0.1+0.2 //0.30000000000000004 有一种比较快捷的方式是先把小数乘以10的整数倍,然后再运算,如: (0.1*10+0.2*10)/10 //0.3 但是这种方式也不是100%准确的,乘以整百也可能精度丢失,比如: 2177.74*100 //217773.99999999997 所以常用的几种处理方式有: 把小数转化为字符串,拆分整数部分和小数部分分别计算,然后再把结果进行拼接; 先乘10的整

几个前端小技巧

1:js在进行小数运算时会有丢失精度问题(其他语言也是),比如: 0.1+0.2 //0.30000000000000004 有一种比较快捷的方式是先把小数乘以10的整数倍,然后再运算,如: (0.1*10+0.2*10)/10 //0.3 但是这种方式也不是100%准确的,乘以整百也可能精度丢失,比如: 2177.74*100 //217773.99999999997 a.把小数转化为字符串,拆分整数部分和小数部分分别计算,然后再把结果进行拼接; b.先乘10的整数倍,然后再用toFixed进