riot实现一个记时组件

最新推荐文章于 2020-09-17 20:47:20 发布

caiwanxia

最新推荐文章于 2020-09-17 20:47:20 发布

阅读量530

点赞数

分类专栏： javascript riot 文章标签： javascript riot 自定义组件

本文链接：https://blog.csdn.net/caiwanxia1/article/details/52926704

版权

javascript 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

riot

10 篇文章 0 订阅

订阅专栏

思路：

该记时组件有2个属性，一个title, 一个times时间显示，times 由 hh：mm：ss 组成，

应该有个定时器，让ss每秒+1；

<timer>

    <p>{title}{ times }</p>

    <script>
        this.time = opts.start || 0;
        this.title = opts.title || "Seconds Elapsed :";
        this.format = opts.format || "hh:MM:ss";
        this.times = "00:00:00";

        function time_To_hhmmss(seconds){
            var hh;
            var mm;
            var ss;
//传入的时间为空或小于0
            if(seconds==null||seconds<0){
                return;
            }
//得到小时
            hh=seconds/3600|0;
            seconds=parseInt(seconds)-hh*3600;
            if(parseInt(hh)<10){
                hh="0"+hh;
            }
//得到分
            mm=seconds/60|0;
//得到秒
            ss=parseInt(seconds)-mm*60;
            if(parseInt(mm)<10){
                mm="0"+mm;
            }
            if(ss<10){
                ss="0"+ss;
            }
            return hh+":"+mm+":"+ss;
        }

        tick(){
            this.update({ time: ++this.time,times:time_To_hhmmss(this.time)});

        }

        var timer = setInterval(this.tick, 1000);

        this.on('unmount', function() {
            clearInterval(timer)
        });
    </script>

</timer>

在页面中引用timer标签

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Riot Example: Timer</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <timer></timer>
    <!-- riot tags -->
    <script src="timer.tag" type="riot/tag"></script>

    <!-- scripts we need -->
    <script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>

    <!-- mount this app -->
    <script> riot.mount('timer', { title:'Seconds Elapsed :',format:'hh:MM:ss',start: 0 }) </script>
</body>
</html>

caiwanxia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
riot实现一个记时组件

思路：该记时组件有2个属性，一个title, 一个times时间显示，times 由 hh：mm：ss 组成，应该有个定时器，让ss每秒+1； {title}{ times } this.time = opts.start || 0; this.title = opts.title || "Seconds Elapsed :
复制链接

扫一扫

专栏目录