上班第一天，无聊的一天

最新推荐文章于 2021-12-27 20:35:19 发布

leoZ231

最新推荐文章于 2021-12-27 20:35:19 发布

阅读量260

点赞数

分类专栏：故纸堆

本文链接：https://blog.csdn.net/jiangfuofu555/article/details/79348359

版权

故纸堆专栏收录该内容

88 篇文章 0 订阅

订阅专栏

今天上班没有事情做，下午3点就没事了。开始想用js计算一下到下班时间还有多长时间，就写了个小demo玩。以解无聊。。。

<html>
<head>
<style type="text/css">
    div {
        padding: 10px;
        //float: left;
    }
</style>
</head>
<body>
<div id="begin">123</div>
<div id="end">123</div>
<div id="delta">123</div>
<canvas id="myCanvas" width="300" height="150">
</canvas>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    
    var i = 0;
    function startTime(){ 
        var time = $('#time');
        var end = new Date('2018/02/22 17:00:00');
        var begin = new Date('2018/02/22 16:21:51');
        begin = new Date();
        
        var tmp = end - begin;
        tmp = tmp/1000;
        
        var hour = Math.floor(tmp/3600);
        var min = Math.floor(tmp%3600/60);
        var second = Math.floor(tmp%3600%60);
        var timedelta = hour + ":" + min + ":" + second;
        
        $('#begin').text(begin.toTimeString());
        $('#end').text(end.toTimeString());
        $('#delta').text(timedelta);
        
        
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        
        ctx.clearRect(0,0,300,150);
        ctx.beginPath();
        ctx.moveTo(100,75);
        
        var test = (4.5 - begin.getSeconds() / 30) * Math.PI;
        
        var x = 100 + Math.floor(Math.cos(test)* 50);
        var y = 75  + Math.floor(-1 * Math.sin(test)* 50);
        
        console.log(x);
        console.log(y);
        
        ctx.lineTo(x,y);
        ctx.stroke();

        ctx.beginPath();
        ctx.arc(100,75,50,0,2*Math.PI);
        ctx.stroke();
        
        setTimeout('startTime()',1000); 
    } 
    
    $(function(){
        startTime();
    });
        
</script>
</body>
</html>