JS之setTimeOut与clearTimeOut
小练习1：针对HTML，分别使用 setTimeout 和 setInterval 实现以下功能：
- 点击按钮时，开始改变 fade-obj 的透明度，开始一个淡出（逐渐消失）动画，直到透明度为0
- 在动画过程中，按钮的状态变为不可点击
- 在动画结束后，按钮状态恢复，且文字变成“淡入”
- 在 按钮显示 淡入 的状态时，点击按钮，开始一个“淡入”（逐渐出现）的动画，和上面类似按钮不可点，直到透明度完全不透明
- 淡入动画结束后，按钮文字变为“淡出”
- 暂时不要使用 CSS animation （以后我们再学习）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>与页面对话4</title>
</head>
<body> <div id="fade-obj" style="width:300px;height:300px;background:#000;opacity: 1;"></div>
<button id="fade-btn" onclick="beLowOpa()">淡出</button>
<script>
var opaCount = 1;
var btn= document.getElementById("fade-btn"); function beLowOpa() {
btn.disabled = true;
opaCount -= 0.05;
document.getElementById("fade-obj").style.opacity = opaCount;
var t = setTimeout("beLowOpa()", 100);
if (opaCount <= 0) {
clearTimeout(t);
btn.disabled = false;
btn.innerHTML = "淡入";
btn.addEventListener("click", beHighOpa);
}
}
function beHighOpa() {
btn.disabled = true;
opaCount += 0.05;
document.getElementById("fade-obj").style.opacity = opaCount;
var t = setTimeout("beHighOpa()", 100);
if (opaCount >= 1) {
clearTimeout(t);
btn.disabled = false;
btn.innerHTML = "淡出";
btn.addEventListener("click", beLowOpa);
}
}
</script>
</body> </html>
JS之setTimeOut与clearTimeOut的更多相关文章
- node.js之setTimeout()、clearTimeout()与 setInterval()与clearInterval()
1.setTimeout函数与clearTimeout函数 setTimeout(cb,ms,[arg],[...])延时一定时间执行回调函数该函数中cb参数为必填函数,为需要执行的回调函数ms为经过 ...
- js中setTimeout和clearTimeout的使用
setTimeout,延迟n秒后执行指定代码 clearTimeout,清除计时器 <html> <head> <script type="text/javas ...
- JS window对象 取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用，停止计时器。 语法: clearTimeout(id_of_setT
取消计时器clearTimeout() setTimeout()和clearTimeout()一起使用,停止计时器. 语法: clearTimeout(id_of_setTimeout) 参数说明: ...
- js中settimeout方法加参数
js中settimeout方法加参数的使用. 简单使用看w3school 里面没有参数调用, 例子: <script type="text/javascript"> ...
- 结合setTimeout和clearTimeout，实现“返回顶部”的功能
结合setTimeout和clearTimeout,当页面停止滚动时,“返回顶部”按钮淡隐淡出.点击“返回顶部”页面以动画形式返回顶部.完美兼容ie6-11,firefox,chrome等. html ...
- javascript的setTimeout()用法总结，js的setTimeout()方法
引子 js的setTimeout方法用处比较多,通常用在页面刷新了.延迟执行了等等.但是很多javascript新手对setTimeout的用法还是不是很了解.虽然我学习和应用javascript已经 ...
- 利用setTimeOut 和clearTimeOut 方法控制写一个 滑动导航显示不同信息的效果
效果如图鼠标滑动导航 下边显示不同效果 html代码和css格式代码 <body><div id="tab" class="tab"> ...
- 浅谈JS之setTimeout与setInterval
概念 setTimeout与clearTimeout,以及setInterval与clearInterval均属于Window对象方法. 方法 描述 setTimeout 在指定的毫秒数后调用函数或计 ...
- js中setTimeout/setInterval定时器用法示例
js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...
随机推荐
- 通过cookie绕过验证码登录
在我们做自动化的时候碰到一些比较难破解的验证码时是非常头疼的,一般来说最好的办法就是让开发屏蔽,这样最有益身心健康. 那么今天我介绍的这个方法也挺简单的,就是通过添加cookie的方式绕过验证码直接登 ...
- Python3之 contextlib
Python中当我们们打开文本时,通常会是用with语句,with语句允许我们非常方便的使用资源,而不必担心资源没有关闭. with open('/path/filename', 'r') as f: ...
- 检查java 中有多少个构造函数
检查函数中有多少个构造函数 程序设计思想: 用while来循环,并设置一个布尔类型变量c,当c是true是继续添加构造函数,当c是false是,跳出循环,程序结束.在循环体中,声明一个计数的int型变 ...
- TX 下常用的查询指令
查看Jetson TX2 L4T版本 head -n 1 /etc/nv_tegra_release 查看系统版本 cat /etc/lsb-release 查看系统l内核 uname -a 查看内存 ...
- WeakHashMap源码分析
WeakHashMap是一种弱引用map,内部的key会存储为弱引用, 当jvm gc的时候,如果这些key没有强引用存在的话,会被gc回收掉, 下一次当我们操作map的时候会把对应的Entry整个删 ...
- Sklearn，TensorFlow，keras模型保存与读取
一.sklearn模型保存与读取 1.保存 from sklearn.externals import joblib from sklearn import svm X = [[0, 0], [1, ...
- Codeforces Round #545 (Div. 2) 题解
题目链接 A. Sushi for Two 题意 在一个 01 序列中找出长为偶数的连续的一段使得它前一半和后一半内部分别相同,而前一半和后一半不同. \(2\le n\le 100\ 000\) 题 ...
- centsos 查看系统版本信息
[root@hostuser gitlab]# lsb_release -a LSB Version: :core-4.1-amd64:core-4.1-noarch:cxx-4.1-amd64:cx ...
- PHP Variable handling 函数
Variable handling 函数: boolval — 获取变量的布尔值debug_zval_dump — 将内部zend值的字符串表示转储为输出doubleval — floatval 的别 ...
- 【转】常用算法复习及实现（C++版）
一.霍夫曼树实现 给定n个权值作为n个叶子结点,构造一棵二叉树,若带权路径长度达到最小,称这样的二叉树为最优二叉树,也称为哈夫曼树(Huffman tree).哈夫曼树是带权路径长度最短的树,权值较大 ...