微信小程序 | 酷炫时钟样式整理【附源码】

最新推荐文章于 2024-04-01 17:33:16 发布
最新推荐文章于 2024-04-01 17:33:16 发布
阅读量1.1k 收藏 9
点赞数 3
分类专栏： 小程序开发成神之路 文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37797592/article/details/127938528
版权

📌个人主页：个人主页
​🧀 推荐专栏：小程序开发成神之路 --【这是一个为想要入门和进阶小程序开发专门开启的精品专栏！从个人到商业的全套开发教程，实打实的干货分享，确定不来看看？ 😻😻】
📝作者简介：从web开发，再到大数据算法，踩过了无数的坑，用心总结经验教训，助你在技术生涯一臂之力！若想获取更多精彩内容，敬请订阅专栏或者关注😁😂🤣😃😆😉😊😋😍😘🥰
⭐️您的小小关注是我持续输出的动力！⭐️

干货内容推荐

🥇入门和进阶小程序开发，不可错误的精彩内容🥇 ：

文章目录

需求背景

时钟样式通常用在时间打卡类的程序中较多，很多时候时间样式更多只是简单的字符串的前端展示，并没有进行样式的优化。

特此整理了可以适配于移动端的时钟展示界面。源码基于vue 2.0和uni-app框架。完全可以根据你的需求打包到各类小程序或app中。
😁😂🤣😃😄😅😆

一、效果预览

样例类型样例效果
钟表时钟在这里插入图片描述
数字时钟在这里插入图片描述

二、完整源码

2.1 钟表时钟

  • 元素组件代码：
<template  >
	<view >
		<view id="clock">
		  <view class="hour"> 
		    <view class="min"></view>
		    <view class="min"></view>
		    <view class="min"></view>
		    <view class="min"></view>
		    <view class="min"></view>
		  </view>
		  <view class="hour">
		    <view class="min"></view>
		    <view class="min"></view>
		    <view class="min"></view>
		    <view class="min"></view>
		    <view class="min"></view>
		  </view>
		  <!-- <view id="alarm"> </view> -->
		  <view id="min" :style="{webkitTransform:fen}"></view>
		  <view id="hour" :style="{webkitTransform:shi}"></view>
		  <view id="sec" :style="{webkitTransform:miao}"></view>
		  <ol>
			<!-- <li>{{shijian[0]}}{{shijian[1]}}</li>
			<li>{{shijian[1]}}</li>
			<li>{{shijian[1]}}{{shijian[2]}}</li>
			<li>{{shijian[2]}}</li>
			<li>{{shijian[2]}}{{shijian[3]}}</li>
			<li>{{shijian[3]}}</li>
			<li>{{shijian[3]}}{{shijian[4]}}</li>
			<li>{{shijian[4]}}</li>
			<li>{{shijian[4]}}{{shijian[5]}}</li>
			<li>{{shijian[5]}}</li>
			<li>{{shijian[5]}}{{shijian[0]}}</li>
			<li>{{shijian[0]}}</li>  -->
		  </ol>
		</view>
		 
	</view>

</template>

<script>
	 
	export default {
		data() {
			return {
				  shi:0,
				  fen:0,
				  miao:0,
				  shijian:[],
				  tuichu:false,
				  hours:0,
			 }
		},
		computed:{
		
		},
		onLoad() {
			
			this.getcanshu();
			this.tuichu=true;
			if(this.tuichu){
				 this.fristdraw();
				 this.draw();
			}
			  
		},
		onBackPress() {
			this.tuichu=false;
		},
		methods: {
			getcanshu(){
				var now = new Date();
				let then = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0);
				let diffInMil = (now.getTime() - then.getTime());
				let h = (diffInMil/(1000*60*60));
				if(h>11){
					this.shijian=["午", "未", "申", "酉", "戌", "亥"]
				}else{
					this.shijian=["子", "丑", "寅", "卯", "辰", "巳"]
				}
			},
			  draw(){
				  setTimeout(() => {
						 var now = new Date(),//now
						  then = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),//midnight
						  diffInMil = (now.getTime() - then.getTime()),// difference in milliseconds
						  h = (diffInMil/(1000*60*60)),//hours
											 
						  m = (h*60),//minutes
						  s = (m*60);//seconds
						  
						 this.shi= "rotate(" + (h * 30 + (h / 2)-10) + "deg)";
						 this.fen= "rotate(" + (m * 6) + "deg)";
						 this.miao= "rotate(" + (s * 6) + "deg)";
						  
											 
						 if(this.tuichu){
							this.draw();
						 }
				  }, 1000)
				 
			    } ,
				fristdraw(){
				 var now = new Date(),//now
				 then = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0),//midnight
				 diffInMil = (now.getTime() - then.getTime()),// difference in milliseconds
				 h = (diffInMil/(1000*60*60)),//hours			 
				 m = (h*60),//minutes
				 s = (m*60);//seconds
				 this.shi= "rotate(" + (h * 30 + (h / 2)) + "deg)";
				 this.fen= "rotate(" + (m * 6) + "deg)";
				 this.miao= "rotate(" + (s * 6) + "deg)";
				}
		 }
		
			 
			 
	}
</script>

<style>
    @import url("./css/style.css");
 
</style>
  • 样式代码
@charset "utf-8";
*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  padding:0;
  margin:0;
  top:0;
}

body {
  font-size: 100%;
  font-family: helvetica;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: linear-gradient(to bottom, #969696 0%, #6e6e6e 100%);
}

#clock {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom:200upx;
  margin: auto;
  width: 21em;
  height: 21em;
  border-radius: 50%;
  background: #eee;
  border: 0.2em solid #d0d0d0;
  box-shadow: 0 1.2em 0 -1em white, 0 -0.1em 0.3em 0 #fff, 0 0 0 0.6em #e7e7e7, 0 0.6em 1.2em 0 rgba(0, 0, 0, 0.5), inset 0 0.5em 1em 0 rgba(0, 0, 0, 0.3), inset 0 0 8em 0 rgba(0, 0, 0, 0.2);
}
#clock:before {
  display: block;
  content: "";
  position: absolute;
  background: #dedede;
  left: -2em;
  top: -2em;
  width: 25em;
  height: 25em;
  border-radius: 4.6em;
  z-index: -1;
  box-shadow: inset 0 -0.2em 0.2em 0 rgba(0, 0, 0, 0.2), inset 0 0.2em 2em 0 #fff;
}
#clock:after {
  display: block;
  content: "";
  position: absolute;
  height: inherit;
  width: inherit;
  background: transparent;
  top: 0;
  left: 0;
  border-radius: inherit;
  box-shadow: inset 12em 14em 0 -10em rgba(255, 255, 255, 0.25);
  z-index: 4;
}
#clock .hour {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 0.5em;
  height: 16.4em;
  background: transparent;
  box-shadow: 0 -1em 0 -0.1em #383838, 0 1em 0 -0.1em #383838;
  transform: rotate(30deg);
}
#clock .hour:after, #clock .hour:before {
  display: block;
  content: "";
  position: absolute;
  height: inherit;
  width: inherit;
  background: inherit;
  box-shadow: inherit;
  backface-visibility: inherit;
}
#clock .hour:before {
  transform: rotate(30deg);
}
#clock .hour:after {
  transform: rotate(-30deg);
}
#clock .hour:nth-of-type(1) {
  transform: rotate(-60deg);
}
#clock .min {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 0.3em;
  height: 17em;
  background: transparent;
  box-shadow: 0 -0.6em 0 -0.1em #383838, 0 0.6em 0 -0.1em #383838;
  z-index: -1;
  transform: rotate(-54deg);
}
#clock .min:after, #clock .min:before {
  display: block;
  content: "";
  position: absolute;
  height: inherit;
  width: inherit;
  background: inherit;
  box-shadow: inherit;
  backface-visibility: inherit;
  z-index: 0;
}
#clock .min:before {
  transform: rotate(6deg);
 
}
#clock .min:after {
  transform: rotate(12deg);
}
#clock .min:nth-child(2) {
  transform: rotate(-36deg);
}
#clock .min:nth-child(3) {
  transform: rotate(-18deg);
}
#clock .min:nth-child(4) {
  transform: rotate(6deg);
}
#clock .min:nth-child(5) {
	
  transform: rotate(24deg);
}

#alarm {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #f8f8f8;
  width: 2.6em;
  height: 2.6em;
  border-radius: 50%;
  transform: rotate(-45deg);
  box-shadow: 0 0.2em 0.4em 0 rgba(0, 0, 0, 0.1);
}
#alarm:after {
  display: block;
  content: "";
  position: absolute;
  width: 0.4em;
  height: 4.8em;
  top: -4.6em;
  background: linear-gradient(to bottom, #f6f6f6 0%, #f8f8f8 100%);
  left: 0;
  right: 0;
  margin: 0 auto;
  z-index: -3;
  box-shadow: inset 0 1.2em 0 #4ca440, -0.2em -0.2em 0.3em 0 rgba(0, 0, 0, 0.1);
}

#sec {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: radial-gradient(ellipse at center, #ffd322 0%, #fbc900 100%);
  width: 2em;
  height: 2em;
  border-radius: 50%;
  border: 0.14em solid #fbc900;
  z-index: 3;
}
#sec:before, #sec:after {
  display: block;
  content: "";
  position: absolute;
}
#sec:before {
  background: #fbc900;
  width: 0.8em;
  height: 1.5em;
  top: 1.8em;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 0 0 2em 2em;
}
#sec:after {
  width: 0.18em;
  height: 7.6em;
  top: -7.6em;
  background: #fbc900;
  left: 0;
  right: 0;
  margin: 0 auto;
}

#min,
#hour {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #fbc900;
  transform-origin: bottom center;
}

#min {
  width: 0.6em;
  height: 8.6em;
  top: -8.6em;
  border-radius: 2em 2em 0 0;
  box-shadow: inset 0 0 0 0.16em #303030, inset 0 -6em 0 0 #303030, -0.2em -0.2em 0.4em 0 rgba(0, 0, 0, 0.2);
}

#hour {
  width: 0.7em;
  height: 7em;
  top: -7em;
  border-radius: 2em 2em 0 0;
  box-shadow: inset 0 0 0 0.16em #303030, inset 0 -4.2em 0 0 #303030, -0.2em -0.2em 0.4em 0 rgba(0, 0, 0, 0.2);
}

ol {
  position: relative;
  height: inherit;
  width: inherit;
}
ol li {
  counter-increment: customlistcounter;
  font-size: 1.4rem;
  display: inline-block;
  position: absolute;
  letter-spacing: -0.1em;
  color: #383838;
  text-align: center;
}
ol li:before {
 /* content: counter(customlistcounter) ""; */
}
ol li:nth-child(1){
 
	    top: 2.5em;
	    right: 5.4em;
	    font-size: 1.2em;
	   
}

ol li:nth-child(2) {
    top: 2.7em;
        position: absolute;
        right: 2.5em;
}
ol li:nth-child(3) {
  top: 7.8em;
      font-size: 1.2em;
      right: 2.4em;
       
}
ol li:nth-child(4) {
     top: 6.1em;
         right: 2.5em;
}
ol li:nth-child(5) {
        top: 12.90em;
        right: 4.9em;
        font-size: 1.2em;
   
}

ol li:nth-child(7) {
       top: 12.90em;
       right: 11.0em;
       font-size: 1.2em;
}
ol li:nth-child(8) {
  top: 6.1em;
      right: 7.5em;
}
ol li:nth-child(10) {
     top: 2.59em;
  
     right: 7.9em;
}
ol li:nth-child(11) {
    top: 2.6em;
    right: 10.9em;
    font-size: 1.2em;
}
ol li:nth-child(9) {
  top: 7.8em;
      font-size: 1.2em;
      position: absolute;
      left: 1.9em;
}
ol li:nth-child(6) {
        bottom: 1.1em;
        left: 4.7em;
        position: absolute;
}
ol li:nth-child(12) {
      top: 1.0em;
      left: 4.7em;
}

2.2 数字时钟

<template>
    <view class="content">
        <view class="flip-container">
            <view class="flip-items" v-for="(unit,unitIndex) of timeArr" :key="unitIndex">
                <view class="item" v-for="(item,index) of unit.max + 1" :key="index" 
                    :class="{current: unit.current == index, past: unit.current - 1 == index || index==unit.max&&unit.current==0}">
                    <view class="up">
                        <view class="inner">{{index}}</view>
                        <view class="shadow"></view>
                    </view>
                    <view class="down">
                        <view class="inner">{{index}}</view>
                        <view class="shadow"></view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    function getTimeStr(){
        let time = new Date();
        let hour = ('00' + time.getHours()).slice(-2)
        let minute = ('00' + time.getMinutes()).slice(-2)
        let second = ('00' + time.getSeconds()).slice(-2)
        let timeStr = hour + minute + second
        return timeStr
    }
	export default {
		data() {
			return {
                timeStr:getTimeStr(),
                timeRunner:''
			}
		},
        computed:{
            timeArr(){
                return [...this.timeStr].map((unit,index)=>{
                    let max;
                    if(index&1==1){     //时分秒的个位
                        max = 9
                    }else if(index==0){ //时十位
                        max = 2
                    }else if(index==2){ //分十位
                        max = 5
                    }else if(index==4){ //秒十位
                        max = 5
                    }
                    return {
                        max,
                        current:Number(unit),
                    }
                })
            }
        },
        methods:{
            setTimeRunner(){
                this.timeRunner = setInterval(()=>{
                    this.timeStr = getTimeStr()
                },1000)
            }
        },
		created() {
            this.setTimeRunner()
		},
        beforeDestroy() {
            clearInterval(this.timeRunner)
        },
	}
</script>

<style>
    html,body,page{
        font: normal "Helvetica Neue", Helvetica, sans-serif;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<style lang="stylus">
    $width = 60rpx;
    $backgroundColor = #333
    $color = #ccc
    $time = 1s
    $height = $width * 1.5;
    $fontSize = $width * 1.3;
    $lineWidth = ($width / 60);
    $radius = ($width / 10);
    $perspective = $width * 5;
    $gap= $width * 0.2
    .flip-container
        display flex
        justify-content center
        padding 0 20rpx
        position relative
        .flip-items
            // margin 50rpx auto
            position relative
            width $width
            height $height
            font-size $fontSize
            font-weight bold
            border-radius $radius
            box-shadow: 0 2rpx 18rpx rgba(0, 0, 0, 0.7)
            &:nth-of-type(2n+1)
                margin-right $gap
            &:nth-of-type(2),&:nth-of-type(4)
                margin-right $gap * 3
                &::after,&::before
                    position absolute
                    right -(@margin-right / 2)
                    content ''
                    transform translateX(50%)
                    width ($gap / 1.5)
                    height @width
                    border-radius 50%
                    background-color $backgroundColor
                &::before
                    top 25%
                &::after
                    bottom 25%
            .item
                z-index 1
                position absolute
                top 0
                left 0
                right 0
                bottom 0
                perspective $perspective
                &:before
                    content: ''
                    position absolute
                    top (($height - $lineWidth) / 2)
                    left 0
                    z-index 9
                    width: 100%
                    height: $lineWidth
                    min-height 2px
                    background-color rgba(0, 0, 0, 0.6)
                    // background-color $backgroundColor
                .up,.down
                    position absolute;
                    left 0;
                    right 0
                    height 50%;
                    overflow hidden
                .up
                    transform-origin 50% 100%
                    top 0
                .down
                    transform-origin 50% 0%
                    bottom 0
                .inner 
                    position: absolute;
                    left: 0;
                    width: 100%;
                    height: $height
                    line-height $height
                    color: $color;
                    text-shadow: 0 2rpx 4rpx #000
                    text-align: center;
                    background-color: $backgroundColor
                    border-radius: $radius
                .up .inner 
                    top 0
                .down .inner 
                    bottom 0
                .up .shadow
                    border-top-left-radius $radius
                    border-top-right-radius $radius
                .down .shadow
                    border-bottom-left-radius $radius
                    border-bottom-right-radius $radius
        .flip-items .item
            &.past {
              z-index: 3;
            }
            &.current {
              //反转到中间时候当前秒层级最大
              animation: highter-level ($time/2) ($time/2) linear forwards;
              z-index: 2;
            }
            &.past .up {
              animation: flip-past-up ($time/2) linear both;
            }
            &.current .down {
              animation: flip-current-down ($time/2) ($time/2) linear both;
            }
            @keyframes flip-current-down {
              from{
                transform: rotateX(90deg);
              }
              to {
                transform: rotateX(0deg);
              }
            }
            @keyframes flip-past-up {
              from{
                transform: rotateX(0deg);
              }
              to {
                transform: rotateX(-90deg);
              }
            }    
            @keyframes highter-level {
              from{
                z-index: 4;
              }
              to {
                z-index: 4;
              }
            }
        // 控制阴影
        .flip-items .item
            .shadow {
              position: absolute;
              width: 100%;
              height: 100%;
            }
            &.past .up .shadow {
              background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 1) 100%);
              animation: show ($time/2) linear both;
            }
            &.past .down .shadow {
              background: linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.1) 100%);
              animation: show ($time/2) linear both;
            }
            &.current .up .shadow {
              background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 1) 100%);
              animation: hide ($time/2) 0.3s linear both;
            }
            &.current .down .shadow {
              background: linear-gradient(rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.1) 100%);
              animation: hide ($time/2) 0.3s linear both;
            }
        
        @keyframes show {
          from{
            opacity: 0;
          }
          to {
            opacity: 1;
          }
        }
        @keyframes hide {
          from{
            opacity: 1;
          }
          to {
            opacity: 0;
          }
        }
    .other
        position absolute
        font-size 26px
        left 50%
        transform translateX(-50%)
        bottom 50rpx
</style>
陶人超有料
关注
  • 3
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
专栏目录
最炫酷小程序UI界面通用.rar
12-27
六款前端微信小程序完整代码合集。炫酷通用UI。适合二次开发。不错的选择。后台接口预留。有具体说明。分享出来供大家一块学习。能够进行快速集成复用
微信小程序 小工具类 番茄时钟 （源代码+截图）
06-21
微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码+截图）微信小程序 小工具类 番茄时钟 （源代码
微信小程序开发之——时钟-Canvas介绍(1)
最新发布
2401_84048554的博客
04-01 842
其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。当然我也为你们整理好了百度、阿里、腾讯、字节跳动等等互联网超级大厂的历年面试真题集锦。这也是我这些年来养成的习惯，一定要学会把好的东西，归纳整理，然后系统的消化吸收，这样才能极大的提高学习效率和成长进阶。碎片、零散化的东西，我觉得最没有价值的。就好比你给我一张扑克牌，我只会觉得它是一张废纸，但如果你给我一副扑克牌，它便有了它的价值。
微信小程序时钟
Mr. Wu's blog
08-10 1851
微信小程序时钟，模拟翻牌时钟效果
小程序基本命令
aiven1637的博客
10-30 3211
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
微信小程序canvas动态时钟
qq_37942845的博客
05-30 3133
canvas时钟效果图： 代码： wxml: &lt;view style='width:100%;height:{{canvasHeight}}px' catchtap='goCountdown'catchlongtap='touchstart' catchtouchend='touchend'&gt; &lt;canvas canvas-id='clock' style...
微信小程序 番茄时钟 (源码)
05-30
微信小程序 番茄时钟 (源码)微信小程序 番茄时钟 (源码)微信小程序 番茄时钟 (源码)微信小程序 番茄时钟 (源码)微信小程序 番茄时钟 (源码)微信小程序 番茄时钟 (源码)微信小程序 番茄时钟 (源码)微信小程序 番茄...
微信小程序 画布：时钟 (源码)
05-30
微信小程序 画布：时钟 (源码)微信小程序 画布：时钟 (源码)微信小程序 画布：时钟 (源码)微信小程序 画布：时钟 (源码)微信小程序 画布：时钟 (源码)微信小程序 画布：时钟 (源码)微信小程序 画布：时钟 (源码)微信...
一键直接跳转到微信小程序|单页源码
04-18
强制微信内打开的，还是很不错的，用来给小程序做引流简直太方便了。 以下引用原介绍： 可实现点击链接跳转到微信小程序，目前支持短信、邮件、百度、知乎、抖音、快手、QQ、微信、B站、今日头条、浏览器、自己...
微信小程序 番茄时钟（截图+源码）
05-11
微信小程序 番茄时钟（截图+源码）微信小程序 番茄时钟（截图+源码）微信小程序 番茄时钟（截图+源码）微信小程序 番茄时钟（截图+源码）微信小程序 番茄时钟（截图+源码）微信小程序 番茄时钟（截图+源码）微信小...
微信小程序源码 番茄时钟(学习版)
06-18
微信小程序源码 番茄时钟(学习版)微信小程序源码 番茄时钟(学习版)微信小程序源码 番茄时钟(学习版)微信小程序源码 番茄时钟(学习版)微信小程序源码 番茄时钟(学习版)微信小程序源码 番茄时钟(学习版)微信小程序源码...
超详细，用canvas在微信小程序上画时钟教程
逐梦小涛
03-01 623
最近开始学习canvas，看了慕课网的一个视频，开始自己动手在微信小程序上画个时钟， 首先我们可以先看以下微信小程序的官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/api/canvas/reference.html 和canvas的手册对比：http://www.w3school.com.cn/tags/html_ref_canvas.asp
微信小程序--实现番茄钟功能
weiba_tao的博客
12-14 3707
微信小程序--番茄钟，主要实现倒计时、数据统计展示功能
微信小程序实战-01翻页时钟-1
渔道的博客
01-08 1479
微信小程序实战之翻页时钟
微信小程序——模拟时钟案例
流楚丶格念的博客
04-02 9102
文章目录案例效果图前导知识：canvas代码部分 案例效果图 实时更新，因为我当时是六点多 前导知识：canvas 微信小程序中的canvas画布（内容过多，请查看我整理的另一篇博客）：链接：https://yangyongli.blog.csdn.net/article/details/115406308 如果想查看网页中的canvas知识，可点击：https://blog.csdn.net/weixin_45525272/article/details/113527524 代码部分 wxml <
微信小程序项目实例——打卡时钟
热门推荐
ws15168689087的博客
04-25 2万+
这是一款简单实用的小时钟工具 分为工作和休息两种状态 用户可以设置相应的时间 所有的时钟记录都会被保存下来
云开发寝适闹钟微信小程序源码
极乐数据
07-19 960
云开发寝适闹钟微信小程序源码，这是一款专为学生打造的云开发寝适闹钟微信小程序源码，是一个寝室一体化的闹钟小程序方案，可以帮助室友们到点起床，或到点和室友约好学习，却迟迟醒不来，无法保存学习状态。这款闹钟就可以有助你保持自律状态，用户只需要添加小组成员，也就是分别打开小程序添加自己和室友的姓名和图片，然后设置每日响铃时间即可。软件架构设置闹钟页面、显示/编辑成员页面、添加成员页面、闹钟响铃页面。...
小程序酷炫动态登录页源码（动态水滴）
大爱仙尊
02-09 837
登陆页面一般都要酷炫好看一点，这里分享一个动态登录页面，页面有三个流动的小水滴。一个水滴放登录框。剩下两个水滴跳转页面和打开弹窗
时钟周期同步微信小程序
05-11
时钟周期同步是一种在分布式系统中实现时钟同步的算法，可以用于微信小程序中。在微信小程序中，可以通过获取当前时间戳的方式来实现时钟同步。 具体实现方法如下： 1. 在微信小程序中使用Date对象获取当前时间戳，即new Date().getTime()。 2. 将当前时间戳发送给服务器端。 3. 服务器端获取当前时间戳，并返回给客户端。 4. 客户端使用服务器端返回的时间戳和本地时间戳计算出时间差，即服务器端时间戳减去本地时间戳。 5. 客户端使用时间差调整本地时间，即将本地时间加上时间差。 6. 客户端和服务器端都使用调整后的时间作为当前时间，实现时钟同步。 需要注意的是，由于网络延迟等原因，客户端和服务器端获取的时间戳可能会存在误差，因此需要进行一定的校准处理。可以通过多次获取时间戳并取平均值的方式来减小误差。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陶人超有料

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值