用vs做的网站怎么打开吗,网站开发有侵权吗,淘宝运营培训班学费大概多少,凡科网站为什么免费做网站微信小程序实战系列 《微信小程序实战-01翻页时钟-1》《微信小程序实战-02翻页时钟-2》 文章目录 微信小程序实战系列前言动态翻页效果实现clock.wxmlclock.wxssclock.js运行效果 总结 前言 本文继续完成最后一个部分“动态翻页效果”。 动态翻页效果实现 clock.wxml …微信小程序实战系列 《微信小程序实战-01翻页时钟-1》《微信小程序实战-02翻页时钟-2》 文章目录 微信小程序实战系列前言动态翻页效果实现clock.wxmlclock.wxssclock.js运行效果 总结 前言 本文继续完成最后一个部分“动态翻页效果”。 动态翻页效果实现 clock.wxml view classcontainer view classclock-containerview classflip-containerblock wx:for{{timeArr}} wx:for-itemunit wx:for-indexunitIndex wx:keyunitIndexview classflip-itemsblock wx:for{{unit.max1}} wx:for-itemitem wx:for-indexindex wx:keyindexview class{{[item,(unit.currentindex)?current:,(unit.current-1index||indexunit.maxunit.current0)?past:]}}view classupview classinner{{index}}/viewview classshadow/view/viewview classdownview classinner{{index}}/viewview classshadow/view/view/view/block/view/block/view /view /view clock.wxss .flip-container {display: flex;justify-content: center;position: relative;padding: 0 20rpx; }.flip-items {position: relative;width: 90rpx;height: 145rpx;font-size: 128rpx;font-weight: bold;border-radius: 10rpx;border: 1rpx solid rgba(121, 121, 121, 0.384);box-shadow: 0 2rpx 18rpx rgba(0, 0, 0, 0.7); }.flip-container .flip-items:nth-of-type(2n1) {margin-right: 12rpx; }.flip-container .flip-items:nth-of-type(2), .flip-container .flip-items:nth-of-type(4) {margin-right: 36rpx; }.flip-container .flip-items:nth-of-type(2)::after, .flip-container .flip-items:nth-of-type(4)::after, .flip-container .flip-items:nth-of-type(2)::before, .flip-container .flip-items:nth-of-type(4)::before {position: absolute;right: -18rpx;content: ;transform: translateX(50%);width: 25rpx;height: 25rpx;border-radius: 50%;box-shadow: rgba(0, 0, 0, 0.7) 1px 1px 5px;background-color: rgba(0, 0, 0, 0.801); }.flip-container .flip-items:nth-of-type(2)::before, .flip-container .flip-items:nth-of-type(4)::before {top: 25%; }.flip-container .flip-items:nth-of-type(2)::after, .flip-container .flip-items:nth-of-type(4)::after {bottom: 25%; }.item {position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 1; }.item::before {position: absolute;content: ;top: 75rpx;width: 100%;height: 5rpx;background-color: rgba(0, 0, 0, 0.5);z-index: 9; }.flip-container .flip-items .item .up, .flip-container .flip-items .item .down {position: absolute;left: 0;right: 0;height: 50%;overflow: hidden; }/* 设置transform的原点 */ .up {transform-origin: 50% 100%;top: 0; }/* 设置transform的原点 */ .flip-container .flip-items .item .down {transform-origin: 50% 0%;bottom: 0; }.flip-container .flip-items .item .inner {position: absolute;width: 100%;height: 145rpx;color: #252525;left: 0;line-height: 145rpx;text-align: center;text-shadow: 0 2rpx 4rpx rgb(0, 0, 0);border-radius: 10rpx;background-color: #55e3e3; }.flip-container .flip-items .item .up .inner {top: 0; }.flip-container .flip-items .item .down .inner {bottom: 0; }.flip-container .flip-items .item .up .shadow {border-top-left-radius: 10rpx;border-top-right-radius: 10rpx; }.flip-container .flip-items .item .down .shadow {border-bottom-left-radius: 10rpx;border-bottom-right-radius: 10rpx; }.flip-container .flip-items .item.past {z-index: 3; }/* current time keep top z-index:4 */ .flip-container .flip-items .item.current {animation: highter-level 0.5s 0.5s linear forwards;z-index: 2; }/* 前一秒的上半页,旋转 0-90deg */ .flip-container .flip-items .item.past .up {animation: flip-past-up 0.5s linear both; }/* 当前秒的下半页,旋转900 */ .flip-container .flip-items .item.current .down {animation: flip-current-down 0.5s 0.5s 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-container .flip-items .item .shadow {position: absolute;width: 100%;height: 100%; }/* show 渐变 */ .flip-container .flip-items .item.past .up .shadow {background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, #000 100%);animation: show 0.5s linear both; }/* show 渐变 */ .flip-container .flip-items .item.past .down .shadow {background: linear-gradient(#000 0%, rgba(0, 0, 0, 0.1) 100%);animation: show 0.5s linear both; }/* hide 渐变 */.flip-container .flip-items .item.current .up .shadow {background: linear-gradient(rgba(0, 0, 0, 0.1) 0%, #000 100%);animation: hide 0.5s 0.3s linear both; }.flip-container .flip-items .item.current .down .shadow {background: linear-gradient(#000 0%, rgba(0, 0, 0, 0.1) 100%);animation: hide 0.5s 0.3s linear both; }keyframes show {from {opacity: 0;}to {opacity: 1;} }keyframes hide {from {opacity: 1;}to {opacity: 0;} }clock.js Page({data: {},onLoad: function () {this.setTimeRunner()},setTimeRunner: function () {this.timeRunner setInterval(() {this.getTimeStr();this.getTimeArr();}, 1000);},getTimeStr: function () {let that this;var time new Date();var hour (0 time.getHours()).slice(-2);var minute (0 time.getMinutes()).slice(-2);var second (0 time.getSeconds()).slice(-2);var timeStr (hour minute second).split();that.setData({timeStr:timeStr})},getTimeArr: function () {var timeArr this.data.timeStr.map(function (element, index) {var 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;}var current Number(element)return {max: max,current: current};})this.setData({timeArr:timeArr})},beforeDestroy:function () {clearInterval(this.timeRunner);},onUnload: function () {this.beforeDestroy()} })运行效果 点击翻页时钟运行效果 总结 本项目的综合性较强对wxss、wxml、js的综合运用需要较为熟悉是一个非常好的练手小项目。