欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序?qū)崿F(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能

 更新時(shí)間:2022年05月22日 15:41:56   作者:m0_51129502  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單倒計(jì)時(shí)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)簡(jiǎn)單倒計(jì)時(shí)的具體代碼,供大家參考,具體內(nèi)容如下

任務(wù)描述:

計(jì)時(shí)器

任務(wù)要求:

案例描述:設(shè)計(jì)一個(gè)實(shí)現(xiàn)倒計(jì)時(shí)功能的小程序,小程序運(yùn)行后,首先顯示空白界面,過2秒后才顯示計(jì)時(shí)界面,點(diǎn)擊“開始計(jì)時(shí)”按鈕后開始倒計(jì)時(shí),點(diǎn)擊“停止計(jì)時(shí)”按鈕后停止計(jì)時(shí)。

實(shí)現(xiàn)效果:根據(jù)案例描述做出如下圖效果,初始顯示空白界面,2秒后顯示計(jì)時(shí)界面(圖1),數(shù)字為60,點(diǎn)擊“開始計(jì)時(shí)”按鈕后開始倒計(jì)時(shí),點(diǎn)擊“停止計(jì)時(shí)”按鈕后停止計(jì)時(shí)(圖2)。

index.wxml

<!--index.wxml-->
<view class="container">
? <view wx:if="{{hidden}}">
? ? <view class="title"> 計(jì)時(shí)器</view>
? ? <view class="play"> {{num}}</view>
? ? <view class="btn">
? ? ? <button bindtap="start"> 開始計(jì)時(shí)</button>
? ? ? <button bindtap="stop">停止計(jì)時(shí)</button>
? ? </view>
? </view>
</view>

index.js

// index.js
// 獲取應(yīng)用實(shí)例
var num = 60;//定義開始秒數(shù)
//定義一個(gè)布爾變量,用于停止計(jì)時(shí)器
var ynStop=false;
Page({
? data: {
? ? //用于顯示計(jì)算器
? ? hidden: false,
? ? num: num
? },
? //渲染出計(jì)時(shí)器
? onLoad() {
? ? //function里直接用this會(huì)出錯(cuò)
? ? var that =this
? ? //延時(shí)顯示函數(shù)
? ? setTimeout(function(){
? ? //設(shè)置隱藏屬性為否
? ? that.setData({
? ? ? hidden:true
? ? })
? }
? //設(shè)置延時(shí)為2s
? ? , 2000);
? },
?
? start: function () { //開始計(jì)時(shí)函數(shù)
? ? //設(shè)置顯示器值為當(dāng)前值減一
? ? this.setData({
? ? ? num: num--
? ? })
? ? //調(diào)用timer函數(shù)
? ? this.timer()
? ? //后臺(tái)打印num值
? ? console.log(num)
? },
?
? stop: function () { ?//停止函數(shù)
? ? //將是否停止循環(huán)值定義為真
? ? ? ynStop=true;
? ? console.log(ynStop)
? },
? timer: function () { //計(jì)時(shí)函數(shù)
?
? ? if (num > 0&&ynStop==false) {
? ? ? //隔一秒回調(diào)start函數(shù),注意setTimeout里函數(shù)不要加括號(hào),或者用function(){}
? ? ? setTimeout(this.start, 1000);
? ? } else {
? ? ? this.setData({
? ? ? ? num: 0
? ? ? })
? ? }
? }
})

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • uni-app低成本封裝一個(gè)取色器組件的簡(jiǎn)單方法

    uni-app低成本封裝一個(gè)取色器組件的簡(jiǎn)單方法

    最近想實(shí)現(xiàn)一個(gè)uniapp取色器組件,實(shí)現(xiàn)后發(fā)現(xiàn)效果還不錯(cuò),下面這篇文章主要給大家介紹了關(guān)于uni-app低成本封裝一個(gè)取色器組件的相關(guān)資料,文中通過圖文介紹的介紹的非常詳細(xì),需要的朋友可以參考下
    2023-02-02
  • JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片翻轉(zhuǎn)的方法

    JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片翻轉(zhuǎn)的方法

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單圖片翻轉(zhuǎn)的方法,涉及javascript操作圖片與數(shù)組的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-04-04
  • Javascript中的call()方法介紹

    Javascript中的call()方法介紹

    這篇文章主要介紹了Javascript中的call()方法介紹,本文講解了Call() 語法、Call() 參數(shù)、Javascript中的call()方法、Call()方法的實(shí)例等內(nèi)容,需要的朋友可以參考下
    2015-03-03
  • ??一文帶你了解JavaScript多文件混淆加密

    ??一文帶你了解JavaScript多文件混淆加密

    JavaScript?代碼多文件混淆加密可以有效保護(hù)源代碼不被他人輕易盜取,這篇文章主要為大家介紹了JavaScript中混淆加密的實(shí)現(xiàn),需要的小伙伴可以參考下
    2023-11-11
  • uploadify在Firefox下丟失session問題的解決方法

    uploadify在Firefox下丟失session問題的解決方法

    在用uploadify上傳插件時(shí)遇到了一個(gè)問題,在讀session時(shí)認(rèn)為沒有權(quán)限而被攔截了,后來在后臺(tái)打印登錄時(shí)產(chǎn)生session的id和上傳時(shí)讀取session的id,解決方法如下,感興趣的朋友可以了解下
    2013-08-08
  • js獲取TreeView控件選中節(jié)點(diǎn)的Text和Value值的方法

    js獲取TreeView控件選中節(jié)點(diǎn)的Text和Value值的方法

    在實(shí)際項(xiàng)目中,遇到一個(gè)問題,首先彈出一個(gè)新窗口,新窗口中放了一個(gè)TreeView控件,現(xiàn)在要解決的是,如何單擊TreeView中一個(gè)節(jié)點(diǎn),返回Text和Value到父頁面并關(guān)閉該新窗口,本文將詳細(xì)介紹此方法的實(shí)現(xiàn)
    2012-11-11
  • javascript 獲取函數(shù)形參個(gè)數(shù)

    javascript 獲取函數(shù)形參個(gè)數(shù)

    本節(jié)主要介紹了javascript獲取函數(shù)形參個(gè)數(shù)的具體實(shí)現(xiàn),需要的朋友可以參考下
    2014-07-07
  • javascript 事件處理示例分享

    javascript 事件處理示例分享

    這篇文章主要介紹了javascript 事件處理示例分享,需要的朋友可以參考下
    2014-12-12
  • 用js傳遞value默認(rèn)值的示例代碼

    用js傳遞value默認(rèn)值的示例代碼

    這篇文章主要介紹了用js傳遞value默認(rèn)值的簡(jiǎn)單實(shí)現(xiàn),很簡(jiǎn)單但比較實(shí)用,需要的朋友可以參考下
    2014-09-09
  • 簡(jiǎn)單分析javascript中的函數(shù)

    簡(jiǎn)單分析javascript中的函數(shù)

    這篇文章主要為大家詳細(xì)介紹了javascript函數(shù),幫助大家更好的理解js函數(shù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-09-09

最新評(píng)論