为了讲解方便,下面我会分为三个部分,分别是环境搭建、代码实现与分析。
一、环境搭建
在开始正式编写代码之前,需要搭建环境。我们需要使用到以下两个工具:
- jQuery库:提供JavaScript的快捷操作方法;
- localStorage:HTML5中的一种本地存储方式,可以存储键/值对,并且将数据保存在用户本地浏览器中。
在代码中,使用jQuery库直接导入到HTML文档中,使用localStorage首先需要检查是否支持localStorage,并对存取方法进行封装,代码如下所示:
// jQuery的引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
// 检查是否支持localStorage
if(!window.localStorage){
alert("浏览器不支持localStorage");
}
// 封装localStorage存取方法
var Storage = {
get: function (key) {
return localStorage.getItem(key);
},
set: function (key, value) {
localStorage.setItem(key, value);
}
}
二、代码实现
接下来是代码实现。本次需求是实现一个简易的计时器,需要包含"开始计时"、"计时暂停"、"计时重置"等功能。代码实现步骤如下:
1. 界面布局
首先需要编写HTML的界面布局,代码如下所示:
<!-- 主要内容 -->
<div class="content">
<!-- 显示时间的部分 -->
<div class="show-time">
<label id="time">00:00:00</label>
</div>
<!-- 操作按钮 -->
<div class="operate">
<button class="start">开始计时</button>
<button class="stop" style="display: none;">暂停计时</button>
<button class="reset" style="display: none;">重置计时</button>
</div>
</div>
其中,.show-time
用于显示计时器,.operate
用于操作计时器,包含三个按钮分别代表了开始计时、暂停计时和重置计时。
2. 实现计时器
计时器可以使用setInterval
函数来实现,此函数可以每次以特定的时间间隔执行指定的代码,这里我们将其封装为一个函数startTime()
。
function startTime() {
let h = 0, m = 0, s = 0, ms = 0; // 初始化时间
let timeFormat = function (str) { // 将时间格式化为 00:00:00.00 的格式
if (str < 10) {
return "0" + str;
} else {
return str;
}
};
let timer = setInterval(function () {
ms++;
if (ms >= 100) {
ms = 0;
s++;
}
if (s >= 60) {
s = 0;
m++;
}
if (m >= 60) {
m = 0;
h++;
}
let currentTime = timeFormat(h) + ":" + timeFormat(m) + ":" + timeFormat(s) + "." + timeFormat(ms);
$("#time").text(currentTime); // 更新时间
Storage.set("time", currentTime); // 将计时器的值存储在localStorage中
}, 10);
Storage.set("timer", timer); // 将计时器的句柄存储在localStorage中
}
3. 实现按钮功能
在按钮功能的实现中,可以用到jQuery库提供的click()
方法,用于监听按钮的点击事件。
- 当点击"开始计时"按钮时,会调用
startTime()
函数来启动计时器,并隐藏"开始计时"按钮,显示"暂停计时"和"重置计时"按钮。
$(".start").click(function () {
$(this).hide();
$(".stop").show();
$(".reset").show();
startTime();
});
- 当点击"暂停计时"按钮时,会停止计时器,并隐藏"暂停计时"按钮,显示"开始计时"按钮。
$(".stop").click(function () {
$(this).hide();
$(".start").show();
clearInterval(Storage.get("timer"));
});
- 当点击"重置计时"按钮时,会将时间清零,并隐藏"暂停计时"和"重置计时"按钮,显示"开始计时"按钮。
$(".reset").click(function () {
h = 0;
m = 0;
s = 0;
ms = 0;
$("#time").text("00:00:00.00");
$(this).hide();
$(".start").show();
clearInterval(Storage.get("timer"));
Storage.set("timer", null);
Storage.set("time", "00:00:00.00");
});
4. 恢复现场
在页面关闭后,如果再次打开页面,我们希望能够恢复上一次的计时记录。这里我们需要使用localStorage来存取计时器的值。
$(document).ready(function () {
let currentTime = Storage.get("time");
if (currentTime) {
$("#time").text(currentTime);
}
let timer = Storage.get("timer");
if (timer) {
$(".start").hide();
$(".stop").show();
$(".reset").show();
setInterval(function () {
startTime();
}, 10);
}
});
三、代码分析
我们可以从上述代码实现中发现,本次计时器的实现中,需要包含以下核心要点:
- 界面布局:需要提前进行布局设计,在代码中通过HTML标签实现;
- 计时器:使用
setInterval()
函数实现计时并将计时器的值存储在localStorage中; - 按钮功能:在计时器中使用按钮来控制计时器的启动、停止和重置,并使用jQuery库提供的
click()
方法来监听按钮的点击事件; - 恢复现场:使用localStorage来恢复上一次计时器的状态信息,使得用户在打开页面之后依然能够看到上一次的计时记录。
除此之外,代码实现的过程中,还需要注意以下两点:
- 记得进行输入输出的格式化;
- 记得将localStorage的存取方法进行封装。
本次实例为计时器功能的简单实现,不过这里面也涵盖了通用的手法和技巧,相信对于初学者来说,会有一定的帮助。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:利用jQuery+localStorage实现一个简易的计时器示例代码 - Python技术站