微信小程序蓝色闹钟页面展示样式模板制作设计下载

制作好以后效果图如下：

一、wxml页面代码如下：

<view class="container timer {{isRuning ? 'timer--runing': ''}}">
	<view class="timer_main">
		 <view class="timer_time-wrap">
		 		<view class="timer_progress_mask"></view>
		 		<view class="timer_progress timer_left">
		 			<view class="timer_circle timer_circle--left" style="transform: rotate({{leftDeg}}deg);"></view>
		 		</view>
		 		<view class="timer_progress timer_right">
		 			<view class="timer_circle timer_circle--right" style="transform: rotate({{rightDeg}}deg);"></view>
		 		</view>
			 	<text wx:if="{{!completed}}" class="timer_time">{{remainTimeText}}</text>
			 	<text 
			 		wx:if="{{isRuning}}" 
			 		animation="{{nameAnimation}}" 
			 		class="timer_taskName">{{taskName}}{{completed ? '已完成！' : '中'}}</text>
		 		<image 
		 			wx:if="{{completed}}" 
		 			class="timer_done" 
		 			src="../../image/complete.png"></image>
		 </view>
		 <input 
		 	type="text" 
		 	placeholder-style="text-align:center" 
		 	class="timer_inputname" 
		 	bindinput="changeLogName"
		 	placeholder="给您的任务取个名字吧"/>
	</view>
	
	<view class="timer_footer">
	  <view 
	  	bindtap="startTimer" 
	  	data-type="work" 
	  	class="timer_ctrl {{isRuning && timerType == 'rest' ? 'hide' : ''}}" >{{isRuning ? '完成': '工作'}}</view>

	  <view 
	  	bindtap="startTimer" 
	  	data-type="rest" 
	  	class="timer_ctrl {{isRuning && timerType == 'work' ? 'hide' : ''}}" >{{isRuning ? '完成': '休息'}}</view>
	</view>
</view>

二、wxss样式文件代码如下：

.container {
  display: flex;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  background-color: #fff;
}

.timer_main {
  position: relative;
  display: flex;
  flex: 2;
  justify-content: center;
  align-items: center;
  margin-top: -45px;
  text-align: center;
  background-color: #3197ed;
  transition: all .5s;
  z-index: 1;
}

.timer_time-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 150px;
  height: 150px;
  text-align: center;
  transition: all .3s;
}

.timer_progress {
  position: absolute;
  top: 0;
  width: 75px;
  height: 150px;
  overflow: hidden;
  transition: all .3s;
}

.timer_progress_mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  border: 3px solid #1589eb;
  opacity: .5;
  border-radius: 50%;
}

.timer_left {
  left: 0;
}

.timer_right {
  right: 0;
}

.timer_circle {
  position: absolute;
  top: 0;
  width: 150px;
  height: 150px;
  border: 3px solid transparent;
  border-radius: 50%;
  transition: all .3s;
}

.timer_circle--left {
  left: 0;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg);
}

.timer_circle--right {
  right: 0;
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg);
}

.timer_time-right {}

.timer_time {
  font-size: 40px;
  color: #fff;
  font-weight: lighter;
  transition: font-size .3s;
}

.timer_taskName {
  position: absolute;
  top: -100px;
  font-size: 14px;
  letter-spacing: 5px;
  color: #fff;
}

.timer_done {
  width: 64px;
  height: 64px;
}

.timer_inputname {
  position: absolute;
  bottom: -40px;
  width: 100%;
  text-align: center;
  height: 40px;
  padding-left: 10px;
  border-bottom: 1px solid #f2f2f2;
  color: #999;
}

.timer_footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding-top: 40px;
  transition: all .3s;
}

.timer_footer > button {}

.timer .timer_ctrl {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 12px;
  color: #fff;
  width: 80px;
  height: 80px;
  margin: 0 20px;
  border-radius: 50%;
  transition: all .7s;
  background-color: #48c23d;
}

.timer .timer_ctrl text {}


/*runing style*/

.timer--runing .timer_main {
  flex: 1;
}

.timer--runing .timer_time {
  font-size: 45px;
}

.timer--runing .timer_time-wrap {
  width: 200px;
  height: 200px;
}

.timer--runing .timer_progress {
  width: 100px;
  height: 200px;
}

.timer--runing .timer_circle {
  width: 200px;
  height: 200px;
}

.timer--runing .timer_footer {
  flex: 0;
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 10;
}

.timer--runing .timer_ctrl {
  background-color: #208DEA;
  height: 30px;
  margin-bottom: 30px;
  border: 1px dashed #dedede;
  border-radius: 20px;
}

三、js页面代码如下：

const util = require('../../utils/util.js')
const defaultLogName = {
  work: '工作',
  rest: '休息'
}
const actionName = {
  stop: '停止',
  start: '开始'
}

const initDeg = {
  left: 45,
  right: -45,
}

Page({

  data: {
    remainTimeText: '',
    timerType: 'work',
    log: {},
    completed: false,
    isRuning: false,
    leftDeg: initDeg.left,
    rightDeg: initDeg.right
  },

  onShow: function() {
    if (this.data.isRuning) return
    let workTime = util.formatTime(wx.getStorageSync('workTime'), 'HH')
    let restTime = util.formatTime(wx.getStorageSync('restTime'), 'HH')
    this.setData({
      workTime: workTime,
      restTime: restTime,
      remainTimeText: workTime + ':00'
    })
  },

  startTimer: function(e) {
    let startTime = Date.now()
    let isRuning = this.data.isRuning
    let timerType = e.target.dataset.type
    let showTime = this.data[timerType + 'Time']
    let keepTime = showTime * 60 * 1000
    let logName = this.logName || defaultLogName[timerType]

    if (!isRuning) {
      this.timer = setInterval((function() {
        this.updateTimer()
        this.startNameAnimation()
      }).bind(this), 1000)
    } else {
      this.stopTimer()
    }

    this.setData({
      isRuning: !isRuning,
      completed: false,
      timerType: timerType,
      remainTimeText: showTime + ':00',
      taskName: logName
    })

    this.data.log = {
      name: logName,
      startTime: Date.now(),
      keepTime: keepTime,
      endTime: keepTime + startTime,
      action: actionName[isRuning ? 'stop' : 'start'],
      type: timerType
    }

    this.saveLog(this.data.log)
  },

  startNameAnimation: function() {
    let animation = wx.createAnimation({
      duration: 450
    })
    animation.opacity(0.2).step()
    animation.opacity(1).step()
    this.setData({
      nameAnimation: animation.export()
    })
  },

  stopTimer: function() {
    // reset circle progress
    this.setData({
      leftDeg: initDeg.left,
      rightDeg: initDeg.right
    })

    // clear timer
    this.timer && clearInterval(this.timer)
  },

  updateTimer: function() {
    let log = this.data.log
    let now = Date.now()
    let remainingTime = Math.round((log.endTime - now) / 1000)
    let H = util.formatTime(Math.floor(remainingTime / (60 * 60)) % 24, 'HH')
    let M = util.formatTime(Math.floor(remainingTime / (60)) % 60, 'MM')
    let S = util.formatTime(Math.floor(remainingTime) % 60, 'SS')
    let halfTime

    // update text
    if (remainingTime > 0) {
      let remainTimeText = (H === "00" ? "" : (H + ":")) + M + ":" + S
      this.setData({
        remainTimeText: remainTimeText
      })
    } else if (remainingTime == 0) {
      this.setData({
        completed: true
      })
      this.stopTimer()
      return
    }

    // update circle progress
    halfTime = log.keepTime / 2
    if ((remainingTime * 1000) > halfTime) {
      this.setData({
        leftDeg: initDeg.left - (180 * (now - log.startTime) / halfTime)
      })
    } else {
      this.setData({
        leftDeg: -135
      })
      this.setData({
        rightDeg: initDeg.right - (180 * (now - (log.startTime + halfTime)) / halfTime)
      })
    }
  },

  changeLogName: function(e) {
    this.logName = e.detail.value
  },

  saveLog: function(log) {
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(log)
    wx.setStorageSync('logs', logs)
  }
})

模板简介：该模板名称为【微信小程序蓝色闹钟页面展示样式模板制作设计下载】，大小是，文档格式为.，推荐使用打开，作品中的图片，文字等数据均可修改，图片请在作品中选中图片替换即可，文字修改直接点击文字修改即可，您也可以新增或修改作品中的内容，该模板来自用户分享，如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。