wxml代码:
<view class=“page-body”>
<view class=“page-body-wrapper”>
<canvas canvas-id=“canvas” class=“canvas”></canvas>
</view>
</view>

js代码:
onReady: function () {

this.totalTime = 30
this.interval = setInterval(this.drawText,1000)
},
drawText: function (){
var context = wx.createCanvasContext(“canvas”)
var _totalTime = this.totalTime
function text(t)
{
context.setFontSize(20)
context.fillText(t, 100, 100)
}
text(_totalTime)

_totalTime = _totalTime - 1
this.totalTime = _totalTime

context.draw(false, dd=>{
if (this.totalTime < 0)
{
this.totalTime = 30
}
})
},

更多代码详情:https://github.crmeb.net/u/LXT

利用canvas实现倒计时功能的更多相关文章

  1. html5 canvas 实现倒计时 功能

    function showTime(a) { var b = { id: "showtime", //canvasid x: 60, //中心点坐标 X轴; y: 60, //中心 ...

  2. H5利用canvas实现海报功能

    最近接到一个需求,微信中用户上传图片生成海报.这个需求比较常规,实现思路也比较简单,通过利用用户的input输入,对所上传的图片进行处理,最后通过第三方库html2canvas合成对应的图片即可.思路 ...

  3. cocos2d JS 利用定时器实现-倒计时功能

    //创建一个定时器 cc.director.getScheduler().schedule(this, this.updates, 1, cc.REPEAT_FOREVER, 0, false, &q ...

  4. java翻译到mono C#实现系列(4) 利用CountDownTimer类实现倒计时功能 mono版

    群里的朋友问利用CountDownTimer类实现倒计时功能怎么实现,我就百度了,参考http://blog.csdn.net/qq344429461/article/details/7521361写 ...

  5. 利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果

    利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果 前言 近日公司接到一个轨道系统的需求,需要将地铁线路及列车实时位置展示在大屏上.既然是大屏项目,那视觉效果当然是第一重点,咱们可以先来看看项 ...

  6. 利用Canvas进行绘制XY坐标系

    首先来一发图 绘制XY的坐标主要是利用Canvas setLeft和setBottom功能(Canvas内置坐标的功能) 1.首先WPF中的坐标系都是从左到右,从上到下的 即左上角位置(0,0)点,所 ...

  7. Android 关于倒计时功能的实现

    关于倒计时的实现,可以说有很多的方法,比较常见的就是Timer+TimerTask+Handler了,或者还可以配合Runnable.例如下面的代码: import java.util.Timer; ...

  8. JS实现为控件添加倒计时功能

    一.概述 在有些报表需求中,需要为控件添加倒计时功能,限制到某一个时间点后能进行一项操作或不能进行某项操作,比如查询,导出功能等等,又需要人性化地显示还有多少时间,即倒计时功能,比如下图中我们限制这个 ...

  9. canvas实现倒计时效果示例(vue组件内编写)

    前言: 此事例是在vue组件中,使用canvas实现倒计时动画的效果.其实,实现效果的逻辑跟vue没有关系,只要读懂canvas如何实现效果的这部分逻辑就可以了 canvas动画的原理:利用定时器,给 ...

随机推荐

  1. myeclipes如何调试web项目

    你可以右击项目,然后选中那个debug as,然后选择open debug dialog,在project中选择要运行的项目,sever中选择服务器,然后单击debug就ok了,,

  2. freeMarker(十六)——FAQ

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 1.JSP 和 FreeMarker ? 我们比较 FreeMarke ...

  3. HBase的bulkLoad

    HBase的BulkLoad有两种方式: thinrow的机制是flatmap把cell的信息进行flatmap:适合少于1万列的数据集:thinrow的涵义就是少行多列: bulkload的机制则是 ...

  4. Python知识点: __import__

    用法:libvirt = __import__('libvirt') help(__import__) __import__(...)    __import__(name, globals={}, ...

  5. 2 ubuntu 16.04 安装Elastic Stack

    一: 安装JAVA8          添加ppa sudo add-apt-repository ppa:webupd8team/java sudo apt-get update 安装oracle- ...

  6. 怎么查看mysql的安装目录,环境:windows+mysql+navicat

    怎么查看mysql的安装目录 如果忘记了MySQL的安装目录,怎么快速找到呢?方法或许很多,作者觉得这种最方便了 环境:windows+mysql+navicat 方法:进入mysql命令行输入:sh ...

  7. Oracle中生成UUID

    Oracle中生成跨系统的唯一识别符UUID非常方便,比生成序列还简单,直接用sys_guid()就行, 例如select sys_guid() from dual 会产生一个跟MAC地址.生成时间相 ...

  8. SpringMvc之参数绑定注解详解之三

    2. @RequestHeader.@CookieValue @RequestHeader 注解,可以把Request请求header部分的值绑定到方法的参数上. 示例代码: 这是一个Request ...

  9. SpringMvc之参数绑定注解详解之二

    2 consumes.produces 示例 cousumes的样例: 1 @Controller   2 @RequestMapping(value = "/pets", met ...

  10. C#设计模式(11)——外观模式

    一.概念 外观模式提供了一个统一的接口,用来访问子系统中的一群接口.外观定义了一个高层接口,让子系统更容易使用.使用外观模式时,我们创建了一个统一的类,用来包装子系统中一个或多个复杂的类,客户端可以直 ...