微信小程序小案例——计时器

IT懒人

于 2022-03-29 18:02:34 发布

阅读量6.2k

点赞数

文章标签：微信小程序

本文链接：https://blog.youkuaiyun.com/weixin_57882885/article/details/123826479

版权

本文通过微信小程序，详细介绍了如何设计并实现一个倒计时功能。在index.wxml中定义显示时间的结构，wxss负责样式设置，js文件中编写计时器逻辑。按照步骤操作后，即可在小程序中运行计时器功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用微信小程序设计一个实现倒计时功能的小程序。

在index.wxml中，

<!--index.wxml-->
<view class='box' hidden='{
  {hidden}}'>
  <view class='title'>计时器</view>
  <view class='time'>{
  {num}}</view>
  <view class='btnLayout'>
    <button bindtap='start' disabled="{
  {btnDisabled}}">开始计时</button>
    <button bindtap='stop'>停止计时</button>
  </view>
</view>

在index.wxss中，

/**index.wxss**/
.box
{
  margin: 20rpx;
  padding: 20rpx;
  border: 1px solid silver;
}
.title
{
  font-size: 25px;
  text-align: center;
  margin-bottom: 15px;
  color: brown;
}
.time
{
  width: 90%;
  line-height: 200px;
  background-color: darkgreen;
  color:rgb(234, 233, 235);
  font-size: 100px;
  text-align: center;
  border:1px soli

最低0.47元/天解锁文章