微信小程序小案例—

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

在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 solid silver;border-radius: 30px;margin: 15px;
}
.btnLayout
{display: flex;flex-direction: row;
}
button
{width: 45%;
}

在index.js中，

// index.js
// 获取应用实例
// pages/kj/Timer/index.js
var num = 60; //计时器显示的数字
var timerID; //计时器ID
Page({data: {hidden: true, //小程序运行时不显示计时界面num: num //将全局变量赋值给绑定变量},onLoad: function(options) {var that = this;setTimeout(() => {that.show()}, 2000) //1秒钟后显示计时界面},show: function () { //显示计时界面函数var that = this;that.setData({hidden: false //显示计时界面})},start: function() { //开始计时函数var that = this;timerID = setInterval(() => {that.timer()}, 1000) //每隔1s调用一次timer函数},stop: function() { //停止计时函数clearInterval(timerID) //清除计时器},timer: function() { //计时函数var that = this;console.log(num)if (num > 0) {that.setData({num: num-- //每次减1})} else {that.setData({num: 0})}console.log(num)}})

然后运行可实现计时器。

微信小程序小案例——计时器相关推荐

axure小程序模板_微信小程序模板案例收集
微信小程序发布近四年来,诞生了各行各业的高质量小程序,其中有很多都是用微信小程序模板制作的.新手在制作自己的小程序时,就可以参考这些好看的小程序模板案例. 1.电商小程序这是目前非常常见的小程序类型 ...
微信小程序入门案例-会议邀请函
微信小程序入门案例-会议邀请函涉及内容:地图目录结构: pages\index\index.wxml <view class="box"><view clas ...
微信小程序实验案例：简易成语小词典
微信小程序实验案例:简易成语小词典 01.准备工作 1●申请数据接口现在网络上第三方的免费数据资源越来越少了,这里推荐使用聚合数据的免费接口来实现本次实验案例. 首先访问聚合数据官网https:// ...
微信小程序小案例——简单数据增删改查模拟
微信小程序小案例--简单数据增删改查模拟应同学导师之邀,要做一个微信小程序,虽然没接触过,本着不会就学的态度就接了.这里就简单记录下制作过程,方便以后自己查找.(此处是粗糙版本,练习用的数据模拟)也 ...
爬虫(21)crawlspider讲解古诗文案例补充+小程序社区案例+汽车之家案例+scrapy内置的下载文件的方法
文章目录第十九章 crawlspider讲解 1. 古诗文案例crawlspider 1.1 需求 1.2 处理 1.3 解析 2. 小程序社区案例 2.1 创建项目 2.2 项目配置 2.3 解析 ...
5个产品经理必须掌握的，小程序裂变案例
大家好,我是 Kevin.这是2019第25篇原创小程序因生存在微信生态,产品经理考虑给予小程序社交关系的分享入口.落地页入口一定是小程序产品经理头痛的地方. 虽然微信张小龙公开说:"我们 ...
java中的基本小程序_12个用Java编写基础小程序经典案例（收藏篇）
原标题:12个用Java编写基础小程序&经典案例(收藏篇) 如果是刚接触或者刚学习java,练习一些基础的算法还是必须的,可以提升思维和语法的使用. 1.输出两个int数中的最大值 impor ...
微信小程序小Demo
微信小程序小Demo 调用API,轮播图,排行榜,底部BabTar的使用... board // board/board.js Page({/*** 页面的初始数据*/// 可以是网络路径图片,也可以 ...
计算机毕业设计Python+uniapp校园服务微信小程序(小程序+源码+LW)
计算机毕业设计Python+uniapp校园服务微信小程序(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ pyth ...
小程序文章怎么导出来_微店小程序—小程序怎么搜索微信店铺
微店小程序/微店铺/下单/下单助手/微商城就在新零售时代到来之时,智慧门店备受广大商家的关注,因为它可以有效实现引流客户进店消费. 为了帮助商家在微信内快速开店,方便商家和用户之间沟通,点击下方图片 ...

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

微信小程序小案例——计时器相关推荐

最新文章

热门文章