web前端-Date

时间戳解释

时间戳就是1970年1月1日的开始到当前时间的毫秒数, 1970年1月1日就是世界上第一个操作系统Unix的诞生日.

获取毫秒

var date = new Date();
var shijianchuo = date.getTime();
var shijianchuo2 = date.valueOf();

简单日历

<div class="container">
    <p id='sp'></p>
    <span id="sd"></span>
</div>

.container{
  width: 200px;
  height: 230px;
  margin: 100px auto;
  background-color: #0094ff;
  text-align: center;
}
.container p{
  color:#fff;
  text-align: center;
  padding: 10px;
}
.container span{
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #FFCC66;
  font-size: 60px;
  text-align: center;
  line-height: 100px;
}

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
var day = date.getDate();
var weekDay = date.getDay();

var sp = document.getElementById('sp');
var span = document.getElementById('sd');
var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
sp.innerHTML = year +'年'+month+'月'+ day+'日'+arr[weekDay];
span.innerHTML = day;

效果如下:

简单版日历
日历Demo地址

时钟效果

<div class="clock">
    <div id='hour' class="hour"></div>
    <div id='minute' class="minute"></div>
    <div id="second" class="second"></div>
</div>

.clock{
    position: relative;
    width: 600px;
    height: 600px;
    margin: 0 auto;
    background:url('http://liyajieblog.oss-cn-qingdao.aliyuncs.com/liyajieblog/imgs/clock/clock.jpg') no-repeat;
}
.clock div{
    position: absolute;
    width: 600px;
    height: 600px;
}
.clock .hour{
    background: url('http://liyajieblog.oss-cn-qingdao.aliyuncs.com/liyajieblog/imgs/clock/hour.png') center no-repeat;
}
.clock .minute{
    background: url('http://liyajieblog.oss-cn-qingdao.aliyuncs.com/liyajieblog/imgs/clock/minute.png') center no-repeat;
}
.clock .second{
    background: url('http://liyajieblog.oss-cn-qingdao.aliyuncs.com/liyajieblog/imgs/clock/second.png') center no-repeat;
}

var ss = document.getElementById('second');
    var mm = document.getElementById('minute');
    var hh = document.getElementById('hour');
    var timer = setInterval(function(){
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        var sec = date.getMilliseconds();

        var s = second + sec / 1000; //总共走了这么多秒
        var m = minute + s / 60; //总共走了这么多分钟
        var h = hour % 12 + m / 60;// 总共走了这么多小时

        hh.style.webkitTransform = 'rotate('+h * 30+'deg)';
        mm.style.webkitTransform = 'rotate('+m * 6+'deg)';
        ss.style.webkitTransform = 'rotate('+s * 6+'deg)';

    },100)

效果如下:

时钟

时钟Demo地址

倒计时效果

倒计时Demo地址