微信小程序开发Day6——定时器的应用

定时器

贪吃蛇在移动的过程中，不仅要知道移动的方向，还要知道移动的速度，这时就牵扯的今天提到的定时器。

定时器：js中提供定时器，我们可以使用它来执行延时执行某一段代码。
-比如我们在snake.js中添加以下代码

onLoad:function (options){var time="aaaaa"var result=""var i=0;var inter=setInterval(function(){//设置定时器result=result+time[i]//结果自增console.log(result)i=i+1;if(i==time.length){//i比time的长度长时，清除定时器clearInterval(inter)}},1000)//每1000ms=1s执行},

console控制台打印出的结果

定时器的应用

在我们开发的过程中，定时器有很大的用处，我们可以通过定时器来完成页面图片的轮播，也可以通过定时器完成点名系统，今天实战一个“打字机效果”。
在sublime中创建一个HTML页面，添加如下代码：

 <!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>//样式设计div{font-size: 50px;text-align: center;background: linear-gradient(pink,purple,pink,purple);-webkit-background-clip: text;color: rgba(0,0,0,0);width: 54%;line-height: 50px;margin:auto;}img{width: 1500px;height: 600px;}body{background-color: pink;}</style>
</head>
<body><div id="box"></div><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1569717809569&di=7d41f3bfc6b0b8e28a7b6acc0b9d1317&imgtype=0&src=http%3A%2F%2Fpic.linecg.com%2Fuploads%2Fvideo_sucai%2F189126%2F20150707%2F189126_1436282147_899.JPG"><script>var str="山一程，水一程，身向榆关那畔行，夜深千帐灯。风一更，雪一更，聒碎乡心梦不成，故园无此声";var result="";var i=0;var time=setInterval(function(){//定时器的应用result=result+str[i]box.innerHTML=result;i=i+1;if(i==str.length){clearInterval(time);}},100)</script>
</body>
</html>

此时我们在浏览器中打开保存好的页面，页面上会打字机效果，“打印”纳兰性德《长相思》。
注意在写诗句时，不要加空格，否则不是空的字符串，实现不了效果。
定时器的应用就完成了。

微信小程序开发Day6——定时器的应用相关推荐

微信小程序开发的基本用法
微信小程序开发的基本用法 1.数组或对象的遍历 1.1.数组遍历 wx:for="{{数组或对象}}" wx:for-item="循环项的名称" wx:for- ...
微信小程序开发基础入门笔记
文章目录 vsc 安装插件(小程序开发助手-微信小程序开发助手) 日常注意: 微信小程序WXS模块的使用框架 1小程序结构和传统的web结构 2 基本的项目目录 3全局配置app.js 4.运算 = ...
前端—微信小程序开发
随着微信的普及和微小程序的广泛应用,微信小程序开发越来越多受到人们的关注,正在成为新工科和人工智能背景下当代大学生的必备技能. 适应对象该课程适合电子信息类专业学生进行学习. 微信小程序开发课程共六 ...
微信小程序开发页面总结-文档(ing)
公共样式定义 /* 公共样式 */ page{height: 100%;background: #f7f7f7; } view,image,input,text,button,textarea {bo ...
原生微信小程序开发-黑马优购（一）
接口文档地址: 轮播图--ShowDoc 视频地址: 黑马程序员微信小程序开发前端教程_零基础玩转微信小程序_哔哩哔哩_bilibili 后面也许可以通过快速搭建mock来获取数据(这个工作肯定要会) ...
【数独】数独游戏-微信小程序开发流程详解
有没有玩过数独游戏呢,听说,它是一个能训练大脑思维的棋盘类游戏,游戏规则很简单,通过小程序来实现很容易,非常适合对数独游戏逻辑感兴趣的同学,选择它开发入门吧. 准备会使用微信开发者工具, 有Java ...
uniapp + vue3微信小程序开发（1）框架搭建
uniapp内置vue2,很多小伙伴喜欢用,但是作为首批吃螃蟹的人,肯定会想用vue3来开发,那么会遇到哪些问题呢? 1.编辑器等工具 Hbuilder X 3.4.6版本及以上(编辑器也在不断更新, ...
微信小程序开发（3） - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
微信小程序开发：微信小程序生命周期总结
前言在微信小程序开发中,关于微信小程序API的使用是必备技能,但是关于微信小程序的生命周期也是首先要了解和掌握的知识点.尤其是现在的前端开发领域,关于前端的各种框架和技术都要会,而且微信小程序的语法 ...

微信小程序开发Day6——定时器的应用

定时器

定时器的应用

微信小程序开发Day6——定时器的应用相关推荐

最新文章

热门文章