【Ionic4】TomatoTime简单实现

前言

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。

效果

源码

• Clock.page.html

<ion-header>
 
<ion-toolbar>
<ion-buttons slot="secondary">
<ion-button [routerLink]="['/home']">
<ion-icon slot="icon-only" name="contact"></ion-icon>
</ion-button>
</ion-buttons>
 
<ion-buttons slot="primary">
<ion-button [routerLink]="['/rank']" color="secondary">
<ion-icon slot="icon-only" name="ribbon"></ion-icon>
</ion-button>
</ion-buttons>
 
<ion-title (click)="presentAlertPrompt()" style=font-weight:normal;font-size:14px;>{{tomatoname}}</ion-title>
</ion-toolbar>
 
 
 
</ion-header>
<ion-content>
<ion-card id='icard' color="mybluecolor">
<p id='lbltime' (click)="getRecords()">番茄时间</p>
<ion-card-header id='TomatoTime'>
<ion-datetime style=text-align:center;font-size:80px;font-family:方正工业黑简体; display-format="mm:ss" cancel-Text="取消"
done-Text="确认" [(ngModel)]="tomatoTime"></ion-datetime>
</ion-card-header>
<p id='lblwork'>工作中</p>
</ion-card>
<!-- <div class="wrap" style=width:20px;height:20px;>
<ion-icon name="contact"></ion-icon><p>默认</p>
<ion-icon name="contact"></ion-icon><p>默认</p>
<ion-icon name="contact"></ion-icon><p>默认</p>
<ion-icon name="contact"></ion-icon><p>默认</p>
<ion-icon name="contact"></ion-icon><p>默认</p>
</div> -->
<div class="dvsound">
<div (click)="sucSound()" style=float:left; class="ico-sound" ><ion-icon name="notifications"></ion-icon><p>默认</p></div>
<div style=float:left; class="ico-sound"><ion-icon name="notifications-off"></ion-icon><p>静音</p></div>
<div style=float:left; class="ico-sound"><ion-icon name="snow"></ion-icon><p>下雪</p></div>
<div style=float:left; class="ico-sound"><ion-icon name="umbrella"></ion-icon><p>细雨</p></div>
<div style=float:left; class="ico-sound"><ion-icon name="rainy"></ion-icon><p>雷雨</p></div>
</div>
<div class="dvbtn">
<ion-button color="myredcolor" id="btnStart" expand="block" (click)="startTest()">开始</ion-button>
</div>
</ion-content>

• Clock.page.scss

.message {
font-size: 50px;
}
#icard {
border-radius: 20px;
position: relative;
margin-top: 60px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 0px;
}
#TomatoTime {
position: relative;
text-align: center;
margin-top: 30px;
}
#lbltime {
position: relative;
text-align: center;
margin-top: 50px;
}
#lblwork {
position: relative;
text-align: center;
margin-bottom: 50px;
}
ion-icon {
width: 30px;
height: 30px;
color: black;
}
.right-top-icon {
float: right;
margin-right: 20px;
}
.left-top-icon {
float: left;
margin-left: 20px;
}
.center-top-tomatoname{
float: left;
left:50%;
}
.dvbtn {
clear:both;
border-radius: 5px;
margin-left: 20px;
margin-right: 20px;
position:relative; 
top: 15%;
}
.ico-sound {
margin-top: 40px;
width: 10%;
height: 15%;
margin-left: 30px;
}
.ico-txt{
margin-top: 70px;
width: 10%;
height: 15%;
margin-left: 30px;
}
.wrap{
margin-top:10px;
}
.dvheader{
margin-top: 10px;
}
.dvsound{
position:relative; 
top: 5%;
}
ionic-icon{
width: 100px;
height: 100px;
}

• Clock.page.ts

import { Component, OnInit, Provider } from '@angular/core';
import { Vibration } from '@ionic-native/vibration/ngx';
import { AlertController } from '@ionic/angular';
import { HttpClient, HttpHeaders } from "@angular/common/http";
import { Storage } from '@ionic/Storage';
@Component({
selector: 'app-clock',
templateUrl: './clock.page.html',
styleUrls: ['./clock.page.scss'],
})
export class ClockPage implements OnInit {
ngOnInit() {
}
constructor(private vibration: Vibration,
public alertController: AlertController,
public http: HttpClient) {
}
// 声明变量
applicationInterval: any; // 定时器
tomatoTime: any = '00:25:00';//声明时钟默认时间
tomatoname: any = '番茄记录';//默认番茄名称
userId: any;//用户Id
userCode: any; //用户code
userName: any;//用户名称
finishTime: any;//结束番茄时间
startTime: any;//开始番茄时间
tomatoSecond: any;//番茄秒数
shaling: any;
//#region 谷浩樟--修改番茄名称弹框--2019年3月16日
async presentAlertPrompt() {
const alert = await this.alertController.create({
header: '番茄名称',
inputs: [
{
name: 'tomato_name',
type: 'text',
id: 'tomato_name',
value: this.tomatoname,
placeholder: '番茄名称'
}
],
buttons: [
{
text: 'Cancel',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
console.log('Confirm Cancel');
}
}, {
text: 'Ok',
handler: data => {
this.tomatoname = data.tomato_name;
}
}
]
});
await alert.present();
}
//#endregion
//#region 谷浩樟--开始番茄方法--2019年3月16日
/**
*开始方法
* @author 谷浩樟
* @since 2019年3月10日13:13:37
*/
startTest() {
this.userId = localStorage.getItem('userId');
this.userCode = localStorage.getItem('userCode');
this.userName = localStorage.getItem('userName');
let tomatohour: number = parseInt(this.tomatoTime.slice(0, [2]));
let tomatominute: number = parseInt(this.tomatoTime.slice(3, [5]));
let tomatosecond: number = parseInt(this.tomatoTime.slice(6, [8]));
let second: number = (tomatohour * 3600 + tomatominute * 60 + tomatosecond);
this.tomatoSecond = second;
if (this.tomatoTime !== "00:00:00") {
if (document.getElementById("btnStart").textContent == "开始") {
//获取当前时间
this.startTime = this.getNowFormatDate();
document.getElementById("btnStart").textContent = "结束";
this.applicationInterval = setInterval(() => {
if (second >= 0) {
second--;
this.tomatoTime = this.s_to_hms(second);
} else {
// 停止定时器
clearInterval(this.applicationInterval);
//获取番茄完成时间
this.finishTime = this.getNowFormatDate();
this.vibration.vibrate(1000);
document.getElementById("btnStart").textContent = "休息";
this.tomatoTime = "00:05:00";
document.getElementById("lbltime").textContent = "休息时间";
document.getElementById("lblwork").textContent = "休息中";
}
}, 1000);
}
else if (document.getElementById("btnStart").textContent == "结束") {
clearInterval(this.applicationInterval);
//获取番茄完成时间
this.finishTime = this.getNowFormatDate();
document.getElementById("btnStart").textContent = "开始";
this.tomatoTime = "00:00:00";
}
else if (document.getElementById("btnStart").textContent == "休息") {
this.rest();
}
else {
clearInterval(this.applicationInterval);
document.getElementById("lbltime").textContent = "番茄时间";
document.getElementById("lblwork").textContent = "工作中";
document.getElementById("btnStart").textContent = "开始";
this.tomatoTime = "00:25:00";
this.vibration.vibrate(1000);
}
}
}
//#endregion
//#region 谷浩樟--休息方法--2019年3月16日
/**
* 休息方法
* @author 谷浩樟
* @since 2019年3月16日
*/
rest() {
//进入休息
let tomatohour: number = parseInt(this.tomatoTime.slice(0, [2]));
let tomatominute: number = parseInt(this.tomatoTime.slice(3, [5]));
let tomatosecond: number = parseInt(this.tomatoTime.slice(6, [8]));
let second: number = (tomatohour * 3600 + tomatominute * 60 + tomatosecond);
if (document.getElementById("btnStart").textContent == "休息") {
document.getElementById("btnStart").textContent = "跳过";
this.applicationInterval = setInterval(() => {
if (second >= 0) {
second--;
this.tomatoTime = this.s_to_hms(second);
} else {
// 停止定时器
clearInterval(this.applicationInterval);
document.getElementById("lbltime").textContent = "番茄时间";
document.getElementById("lblwork").textContent = "工作中";
document.getElementById("btnStart").textContent = "开始";
this.tomatoTime = "00:25:00";
}
}, 1000);
}
}
//#endregion
//#region 谷浩樟--秒转换时分秒方法--2019年3月16日
/**
* 秒转换时分秒
* @author 谷浩樟
* @since 2019年3月10日13:13:37
*/
s_to_hms(s) {
//计算小时
//算法：将秒数除以3600，然后下舍入，既得到小时数
let h;
h = Math.floor(s / 3600);
//计算分钟
//算法：将秒数除以3600，然后下舍入，既得到小时数
//计算秒
//算法：取得秒%60的余数，既得到秒数
let m;
m = Math.floor((s - h * 3600) / 60);
s = Math.floor(s - h * 3600 - m * 60);
//将变量转换为字符串
h += '';
m += '';
s += '';
//如果只有一位数，前面增加一个0
h = (h.length == 1) ? '0' + h : h;
m = (m.length == 1) ? '0' + m : m;
s = (s.length == 1) ? '0' + s : s;
//console.log(h + ':' + s);
return h + ':' + m + ':' + s;
}
//#endregion
//#region 谷浩樟--获取当前时间方法--2019年3月16日
/**
* 获取当前时间(yyyy-mm-dd hh:mm:ss)
* @autor 谷浩樟
* @since 2019年3月16日
*/
getNowFormatDate() {
let date = new Date();
let seperator1: string = "-";
let seperator2: string = ":";
let month: any = date.getMonth() + 1;
let strDate: any = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
let currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ ' ' + date.getHours() + seperator2 + date.getMinutes()
+ seperator2 + date.getSeconds();
return currentdate;
}
//#endregion
}