使用原生JS行内hover子元素与利用JQ写一个倒计时效果

1 废话不多说, 直接贴上代码 :

1
2
onmouseover="this.children[0].style.cssText='color:{$v['tcolor']};'"
onmouseout="this.children[0].style.cssText='color:#000;'"

这2行代码很简单, 目的就是用与行内JS, hover子元素改变颜色的效果, 这个效果我用在了商城首页的分类hover效果上,因为数据是从数据库遍历出来的,颜色也是从数据库拿,页面加载JS是放在最底部加载。

PHP渲染页面是第一步, 所以用原生JS在行内hover肯定比JQ写在单独的JS文件中效果要更好, 一是可以同步加载出hover效果, 二是代码量比JQ少很多

2 这是我用JQ写的一个倒计时效果,这个用到的地方真的是太多了,可以头部new Date中声明未来的具体某个时间,然后这个函数的功能就是倒计时:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var future = new Date("March 15,2017 00:00:00");
function futurerun(){
    var now = new Date();
    var cha = future.getTime() - now.getTime();
    var hour = parseInt(cha/(1000*60*60));
    var hour1 = parseInt(hour/10);
    var hour2 = hour%10;
    cha = cha%(1000*60*60);
    var min = parseInt(cha/(1000*60));
    var min1 = parseInt(min/10);
    var min2 = min%10;
    cha = cha%(1000*60);
    var sec = parseInt(cha/1000);
    var sec1 = parseInt(sec/10);
    var sec2 = sec%10;
    $('.settime').eq(0).html(hour1);
    $('.settime').eq(1).html(hour2);
    $('.settime').eq(2).html(min1);
    $('.settime').eq(3).html(min2);
    $('.settime').eq(4).html(sec1);
    $('.settime').eq(5).html(sec2);
};
futurerun();
timerfuture = setInterval(futurerun,1000);




发布评论
还没有评论,快来抢沙发吧!