前端个人学习笔记(四)

本文介绍了前端开发中常用的技巧和实践案例,包括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(eventfunctionuseCapture)

参数值

参数描述
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属性设置或返回元素的水平滑动条的位置。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值