jq挑战30天——时钟+小程序

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery鼓.com</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.time {background: url(images/img.png);width: 650px;height: 630px;margin: 80px auto; position: relative;}
.m-clock{width: 25px;height: 213px; display: inline-block; position: absolute;background: url(images/clock.png) no-repeat;left: 315px;top: 170px;z-index: 1;transform: rotate(0deg);
transform-origin:45% 74%}/*时*/
.m-minute{width: 25px;height: 233px; display: inline-block; position: absolute;background: url(images/minute.png) no-repeat;left: 315px;top: 151px;z-index: 3;transform: rotate(0deg);
transform-origin:43% 76%;/*定义动画的旋转中心点*/}/*分*/
.m-second{width: 8px;height: 251px; display: inline-block; position: absolute;background: url(images/second.png) no-repeat;left: 322px;top: 147px;z-index: 2;
transform: rotate(0deg);
transform-origin:60% 72%;/*定义动画的旋转中心点*/
 } /*秒*/
.m-core{width: 11px;height: 11px; display: inline-block; position: absolute;background: url(images/core.png) no-repeat;left: 320px;top: 322px;z-index: 5;}/*圆圈*/
</style>
<div class="time"><div class="m-clock"></div><div class="m-minute"></div><div class="m-second"></div><div class="m-core"></div></div>
<script>
    var date=new Date();
    var h=date.getHours(); //获取小时
    var m=date.getMinutes(); //获取分钟
    var s=date.getSeconds(); //获取秒
    if(h>12){
        h = h-12
    }
    
    $('.m-clock').css('transform','rotate('+ h*30 + 'deg)') // 时
    $('.m-minute').css('transform','rotate('+ m*6 + 'deg)') // 分
    $('.m-second').css('transform','rotate('+ s*6 + 'deg)') // 秒
    console.log('时'+h)
    
    console.log('分：'+m)
setInterval(    
    function(){
        
        //当
        if(h>12){
             h = h-12
        }   
      
        $('.m-second').css('transform','rotate('+ (s+1)*6 + 'deg)')
        s++
        //当秒大于60秒时   分加一
        if(s > 60){                        
            m++
            $('.m-minute').css('transform','rotate('+ m*6 + 'deg)') // 分
            s = 0
        }
        //当分大于60秒时   时加一
        if(m == 60){
            console.log('分：'+m)
            h++ 
            $('.m-clock').css('transform','rotate('+ h*30 + 'deg)') // 时
            m = 0       
        }       
    },1000);
</script>

 

</body>

 

</html>
 
小程序代码
<!--view代码-->

<view class="container">
<view class="time"><image class="u-time" src="images/img.png"></image>
<view class="m-clock"><image src="images/clock.png" style="transform:rotate({{clock}});">
</image></view>
<view class="m-minute"><image src="images/minute.png" style="transform:rotate({{minute}});">
</image></view>
<view class="m-second"><image src="images/second.png" style="transform:rotate({{second}});">
</image></view>
<view class="m-core"><image src="images/core.png">
</image></view>
</view>
</view>

<!--app.js代码-->

//app.js
App({
onLaunch: function() {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo: function(cb) {
var that = this
if (this.globalData.userInfo) {
typeof cb == "function" && cb(this.globalData.userInfo)
} else {
//调用登录接口
wx.getUserInfo({
withCredentials: false,
success: function(res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
},
globalData: {
userInfo: null,
clock: new Date().getHours(),
minute: new Date().getMinutes(),
second: new Date().getSeconds()
}
})

<!--index.js代码-->

//index.js
//获取应用实例
var app = getApp()
Page({
data: {
clock: app.globalData.clock,
minute: app.globalData.minute,
second: app.globalData.second
},
onLoad: function () {
var _this = this;
var _data = this.data
var date = new Date();

var h = date.getHours(); //获取小时
var m = date.getMinutes(); //获取分钟
var s = date.getSeconds(); //获取秒
_data.clock = _data.clock * 30 + 'deg';
_data.minute = _data.minute * 6 + 'deg';
_data.second = _data.second * 6 + 'deg';

_this.setData({
clock: _data.clock,
minute: _data.minute,
second: _data.second
})

if (h > 12) {
h = h - 12
}
setInterval(
function () {
//console.log(s)
//当
if (h > 12) {
h = h - 12
}
_data.second = (s + 1) * 6 + 'deg';
_this.setData({
second: _data.second
})
//console.log(_data.second)
s++
//当秒大于60秒时 分加一
if (s > 60) {
m++
_data.minute = m * 6 + 'deg';
_this.setData({
minute: _data.minute
})

s = 0
}
//当分大于60秒时 时加一
if (m == 60) {
// console.log('分：' + m)
h++
_data.clock = h * 30 + 'deg';
_this.setData({
clock: _data.clock
})

m = 0
}
}, 1000);
}
})

<!--index.wxss-->

/**index.wxss**/
.time {width: 1300rpx;height: 1600rpx;margin: 160rpx auto; position: relative;}
.time image.u-time{width:320px;height:300px;display:inline-block;overflow:hidden;}
.m-clock{ display: inline-block;width: 100%; }/*时*/
.m-clock image{width:31rpx;height:180rpx;position:absolute;left:364rpx;top:238rpx;z-index:1;transform:rotate(0deg);
transform-origin:45% 74%;}
.m-minute{ display: inline-block;}/*分*/
.m-minute image{width:31rpx;height:218rpx;position:absolute;left:364rpx;top:201rpx;z-index:3;transform:rotate(30deg);
transform-origin:43% 76%;}
.m-second{ display: inline-block; } /*秒*/
.m-second image{width: 16rpx;height: 222rpx;position: absolute;left: 372rpx;top: 214rpx;z-index: 2;transform-origin:60% 72%;/*定义动画的旋转中心点*/ }
.m-core{}/*圆圈*/
.m-core image{width: 18rpx;height: 18rpx; display: inline-block; position: absolute;left: 368rpx;top: 360rpx;z-index: 5;}

posted @ 2017-08-08 10:31  疯子~**~  阅读(300)  评论(0)  编辑  收藏  举报