秒表
<body>
<div>00:00:00:00</div>
<button>开始</button>
<button disabled>暂停</button>
<button disabled>继续</button>
<button disabled>重置</button>
<script>
// 秒表功能分析
// 核心思路:
// 定义一个变量,根据定时器,每秒执行一次,每次执行++自增操作
// 变量存储的数值,就会每秒+1
// 现在需要的记录效果,是每0.01秒,也就是10毫秒执行一次
// 根据累计的数值,执行进位 ms 如果达到 100,就是1秒
// 如果 秒 达到 60 就是 1分钟
// 如果 分钟 达到 60 就是 1小时
var ms = 0; // 毫秒
var s = 0; // 秒
var m = 0; // 分钟
var h = 0; // 小时
// 定义存储 时 分 秒 毫秒 字符串的变量
// 如果直接在 ms s m h 变量上进行 拼接操作,会影响 ++操作的执行
// 单独的建立变量,来存储累加时间的执行结果
var msStr = '';
var sStr = '';
var mStr = '';
var hStr = '';
// 因为定时器,是定义在函数内部,
// 必须定义一个全局变量,来存储定时器
// 在函数外部可以调用,终止定时器
var time = 0;
// 获取div标签对象
var oDiv = document.querySelector('div');
// 获取按钮的标签对象
var oStart = document.querySelectorAll('button')[0];
var oPause = document.querySelectorAll('button')[1];
var oCont = document.querySelectorAll('button')[2];
var oReset = document.querySelectorAll('button')[3];
// 添加点击事件效果
// 开始按钮
oStart.onclick = function(){
// 点击开始按钮,执行函数,执行秒表计时
setTimeStr();
// 可以点暂停
oPause.disabled = false;
// 其他标签都不能点
oStart.disabled = true;
oCont.disabled = true;
oReset.disabled = true;
}
// 暂停按钮
oPause.onclick = function(){
// 点击暂停按钮,清除定时器,终止秒表执行
clearInterval(time);
// 暂停本身和开始不能点
oPause.disabled = true;
oStart.disabled = true;
// 继续和重置能点了
oCont.disabled = false;
oReset.disabled = false;
}
// 继续按钮
oCont.onclick = function(){
// 点击继续按钮,继续执行定时器
setTimeStr();
// 暂停可以点
oPause.disabled = false;
// 其他都不能点
oCont.disabled = true;
oReset.disabled = true;
oStart.disabled = true;
}
// 重置按钮
oReset.onclick = function(){
// 点击重置按钮,将所有的数据,都恢复到0的状态
// 所有变量存储的数据都是 0 , div中的内容,也恢复到0
// 定义所有存储时间的变量,存储的数值为0
ms = 0; // 毫秒
s = 0; // 秒
m = 0; // 分钟
h = 0; // 小时
// 将div中的内容,设定为初始状态的00:00:00:00内容
oDiv.innerHTML = '00:00:00:00';
// 开始可以点
oStart.disabled = false;
// 其他都不能点
oPause.disabled = true;
oCont.disabled = true;
oReset.disabled = true;
}
// 点击的业务逻辑,也就是谁能点,谁不能点
// 看实际项目的需求,用户说怎么定,你就怎么定就可以了
// 没有一定的必须的要求
// 每次点击开始按钮,或者继续按钮
// 都会调用执行函数,都会生成一个新的定时器
// time中存储的是当前这个新的定时器,是整个程序中定时器的序号
// 例如,点击开始按钮 10 次,会生成10个定时,time中存储最后一个定时器的序号,10
// 当点击暂定按钮时,清除的是 time 中 存储的是 序号是10 的这一个定时器
// 之前 1-9 定时器,仍然会执行
// 解决方法,点击 开始按钮 之后, 在 点击 暂停按钮 之前 禁止再次点击开始按钮
// 也就是 在清除原有定时器之前,不允许生成新的定时器
// 防止生成多个定时器
// 定义函数,这个函数的作用就是记录,执行的时间
// 有 小时 分钟 秒 毫秒 4个部分
// 将记录的时间,写入到div中
// div中,起始时,默认,都是0
function setTimeStr(){
// 赋值操作,将定时器,存储在全局作用域变量中
// 此处只是赋值操作
time = setInterval(function(){
ms++;
// 毫秒 是 10毫秒一增加
// ms存储的数值,如果达到100,就是1秒种了
// 给 秒单位 进位 s++
// ms本身,需要重新开始记录数值
// 0:0:0:99 ---> 0:0:1:00
if(ms == 100){
s++; // 秒进位
ms = 0; // ms本身清零,重新记录
}
if(s == 60){
m++; // 分钟进位
s = 0; // s秒 清零
}
if(m == 60){
h++; // 小时进位
m = 0; // m分钟 清零
}
// 小时记录,可以每24小时清零一次
// 或者 100小时清零一次,都可以,根据需求来
if(h == 100){
h = 0;
}
// 如果记录的时间小于0,要做补零操作
if(ms < 10){
msStr = '0' + ms;
}else{
msStr = ms;
}
if(s < 10){
sStr = '0' + s;
}else{
sStr = s;
}
if(m < 10){
mStr = '0' + m;
}else{
mStr = m;
}
if(h < 10){
hStr = '0' + h;
}else{
hStr = h;
}
// 每次执行,返回一个记录时间的字符串
// 将这个字符串,写入到div中
oDiv.innerHTML = `${hStr}:${mStr}:${sStr}:${msStr}`;
} , 10);
console.log(time);
}
</script>
</body>
标签的禁用属性
<input type="text" readonly>
<input type="text" disabled>
<input type="file" multiple>
<button disabled>点击</button>
<script>
var oBtn = document.querySelector('button');
// 通过定义 true,false ,来设定,是否执行禁用效果
oBtn.disabled = true; // 执行禁用效果,无法操作
oBtn.disabled = false; // 不执行禁用效果,正常使用
oBtn.onclick = function(){
console.log(123);
}
</script>
事件对象的一些属性offsetX clientX pageX
<style>
*{
margin: 0;
padding:0;
}
body{
height: 5000000px;
}
div{
width: 400px;
height: 400px;
background: pink;
border: 50px solid black;
}
</style>
</head>
<body>
<div></div>
<script>
// 事件对象的相关信息
// 存储在事件对象中的属性
// 1, 事件对象.offsetX 事件对象.offsetY
// 点击是,距离 边框线内 标签左上角 坐标
// 2, 事件对象.clientX 事件对象.clientY
// 点击时,距离 视窗窗口 左上角 坐标
// 3, 事件对象.pageX 事件对象.PageY
// 点击时,距离 页面 左上角 坐标
// 如果页面没有滚动,页面的左上角和视窗窗口的左上角重合
// 两个数值是一样的
// 如果页面滚动,页面的左上角不再与视窗窗口的左上角重合
// 两个数值是不同的
var oDiv = document.querySelector('div')
oDiv.onclick = function(e){
console.log(e);
}
</script>
可视窗口的宽度
<style>
body{
height: 5000px;
width: 5000px;
}
</style>
<script>
// 情况1:包括滚动条的宽度高度
// 包含有滚动条宽度高度
// 滚动条的大小,有的时候是16,有的时候是17
// 结果只是数值
// window.innerHeight 高度
// window.innerWidth 宽度
// 情况2:不包括滚动条宽度高度
// document.documentElement.clientHeight 高度
// document.documentElement.clientWidth 宽度
console.log(window.innerHeight);
console.log(document.documentElement.clientHeight);
</script>
