开始前的准备
一、
创建空模板 进入项目目录,ionic serve
用webstorm打开此项目
二、
home page HTML page.ts
spec.ts是测试用的 可以删除
删除tlink.json 定义关于格式上的要求如空格 tab等,双向绑定
三个文件构成一个Component
home.page.html中的代码如下:
<ion-header> <ion-toolbar> <ion-title> 我的第一个app </ion-title> </ion-toolbar> </ion-header> <ion-content> <div class="ion-padding ion-text-center"> <ion-text style="font-size:3rem">{{delayTime}}</ion-text> <ion-range color="danger" pin="true" [(ngModel)]="delayTime"></ion-range> <ion-button (click)="start()" [disabled]="running" >开始</ion-button> <ion-button (click)="stop()" color="danger" [disabled]="!running">停止</ion-button> <p>上面是一个声音控制器</p> </div> </ion-content>
home.page.ts中的代码如下:
import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { delayTime:number = 10; timer =null; running=false; start():void{ if(this.delayTime==100) return;//等于100的时候开始也没用 if(this.running==true) return; this.running=true; this.timer=setInterval( ()=>this.tick(),//这里有一个坑,handler和timeout不能自己输入,输入后面的会自动跳出来,哈哈 神奇吧 1000 ); } stop():void{ if(this.running==false) return; this.running=false; clearInterval(this.timer); } tick(){ this.delayTime++ if(this.delayTime==100){ clearInterval(this.timer); } } }