前端开发技巧与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Always_on_line_/article/details/80748844

本文介绍了前端开发中常用的技巧和实践案例，包括CSS3扁平化设计、DOM事件处理、JS动画与倒计时效果等，同时探讨了事件冒泡与捕获机制，提供了实用的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次的学习内容有：慕课网CSS3扁平化博客之文章页及常用组件; DOM事件探秘; JS动画效果; JS倒计时效果；

1、写代码小技巧：

<li><a href="">item1</a></li>
<li><a href="">item2</a></li>
<li><a href="">item3</a></li>
<li><a href="">item4</a></li>
<li><a href="">item5</a></li>

像上面这个重复的 li，可以简写为 (li>a{item$})*5 ,然后回车，就得到如上代码。

2、addEventListener()

方法用于向指定元素添加事件句柄。

提示：使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

语法

  element.addEventListener(event, function, useCapture)
 

参数值

参数	描述
event	必须。字符串，指定事件名。注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。提示：所有 HTML DOM 事件，可以查看我们完整的 HTML DOM Event 对象参考手册。
function	必须。指定要事件触发时执行的函数。当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值: true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行

跨浏览器解决方法:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器，除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:

  element.attachEvent(event, function);
element.detachEvent(event, function);
 

3、事件的触发顺序自内向外，这就是事件冒泡；事件捕获顺序变更为自外向内。

参考：彻底弄懂JS的事件冒泡和事件捕获;浅谈js的事件冒泡和事件捕获。

4、DOM中的事件对象

（1）type，获取事件类型

（2）target,获取事件目标

（3）stopPropagation(),用于阻止事件冒泡

（4）preventDefault()，阻止事件的默认行为

5、IE中的事件对象

（1）type属性，获取事件类型

（2）srcElement属性，获取事件目标

（3）cancelBubble属性、阻止事件冒泡（设置为true表示阻止冒泡，false表示不阻止）

（4）returnValue属性，阻止事件的默认行为（设置为false表示阻止事件的默认行为）

6、Math.floor(x)方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数。

Math.ceil(x)方法执行的是向上取整计算，它返回的是大于或等于函数参数，并且与之最接近的整数。

例缓冲运动判断：speed = speed >0?Math.ceil(speed):Math.floor(speed);

7、JS实现显示当前时间效果（秒数动态增加）

代码：

<body>
    <div class="content1">
        <div id="show">显示时间的位置</div>
    </div>

    <script>
        window.onload=function(){
            showTime();
        }
            //当分钟和秒钟小于10时检查，若小于10，则在前面添加一个0.
            function checkTime(i) {
              if(i<10){
                  i='0'+i;
              }
              return i;
              }
            function showTime() {
            var myDate = new Date();
            var year = myDate.getFullYear();//年
            var month = myDate.getMonth()+1;//月份默认从0开始，需加1
            var date = myDate.getDate();//日
            var d = myDate.getDay();//默认星期几输出数字0-6
            var h = myDate.getHours();
            var m = myDate.getMinutes();
            var s = myDate.getSeconds();
            m = checkTime(m);
            s = checkTime(s);
            //星期几在转换的时候定义一个数组
            var weekday = new Array(7)
            weekday[0]='星期日'
            weekday[1]='星期一'  
            weekday[2]='星期二'
            weekday[3]='星期三'
            weekday[4]='星期四'
            weekday[5]='星期五'
            weekday[6]='星期六'          
            document.getElementById("show").innerHTML = year + '年' + month + '月'
             + date + '日'+weekday[d]+h+':'+m+':'+s;
           setTimeout(showTime,500);//500毫秒刷新一次，让时间显示倒计时效果
        } 
    </script>
</body>

8、getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。

9、JS显示倒计时效果

代码：

<body>
    <div class="content2">
        <div class="txtshow">距离放暑假还有<span id="timeShow"></span>天</div>
    </div>
    <script>
        window.onload = function () {
        //结束时间减当前时间就是倒计时天数
        var curtime = new Date();
        var endtime = new Date('2018,7,1');
        //天数=（结束时间的毫秒数-当前时间的毫秒数）/一天总共的毫秒数
        //Math.ceil向上取整
        var lefttime = Math.ceil((endtime.getTime() - curtime.getTime())/(24*60*60*1000));
        document.getElementById('timeShow').innerHTML=lefttime;
          }
    </script>
</body>

10、JS显示限时抢倒计时效果

代码：

<body>
    <div class="content3">
        <div class="time">
            还剩<span id="LeftTime"></span>
        </div>
    </div>
    <script>
        window.onload=function(){
        showTime();
        }
        function showTime(){
        var curtime = new Date();
        var endtime = new Date('2018/7/1,22:22:22');//结束时间
        var lefttime = parseInt((endtime.getTime() - curtime.getTime())/1000); //得到结果为秒
        var d = parseInt(lefttime/(24*60*60)); //得到天数
        var h = parseInt(lefttime/(60*60)%24); //得到小时数
        var m = parseInt(lefttime/60%60);//得到分钟数
        var s = parseInt(lefttime%60);//得到秒数
        document.getElementById('LeftTime').innerHTML=d+'天'+h+'时'+m+'分'+s+'秒';
        if(lefttime<=0){
            document.getElementById('LeftTime').innerHTML='限时抢结束';
        }
        setTimeout(showTime,500); //动态显示，500毫秒刷新一次
        }
    </script>
</body>

11、setTimeout(表达式，延迟时间)；在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。

setInterval(表达式，交互时间)；在执行时，它从载入后，每隔指定时间就执行一次表达式。

12、scrollTop属性设置或返回元素的垂直滑动条距离上边的位置。

scrollLeft属性设置或返回元素的水平滑动条的位置。