单个按钮开启暂停时钟案例
单个按钮绑定时钟案例中，核心在于进行value值的判断，每次点击按钮都会进行一次value值判断以及value值更改
HTML源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>一个按钮绑定时钟开始和暂停</title>
</head>
<body onl oad="showTime()">
<div id="d1">
</div>
<!-- 定义隐藏域，目的是为了在点击按钮时切换状态，作为判断开始或暂停的条件 -->
<input type="hidden" id="hdd1" value="start" />
<input type="button" id="btn" value="按钮" onclick="btn_pres()" />
</body>
<script>
function $(obj){
return document.getElementById(obj);
}
var flag;
// 获取当前系统时间
function showTime(){
//修改页面为当前系统时间
$("d1").innerText=currentTime();
//指定毫秒数之后执行指定函数
flag =setTimeout("showTime()",1000);
}
//暂停
function ting(){
clearTimeout(flag);
}
//获取当前系统时间
function currentTime(){
var today=new Date();
var hours=today.getHours();
var mins=today.getMinutes();
var sec =today.getSeconds();
return hours+":"+mins+":"+sec;
}
//点击事件函数
function btn_pres(){
if($("hdd1").value=="start"){
clearTimeout(flag);//暂停时间
$("hdd1").value="end";
}else {
showTime();//开启时间
$("hdd1").value="start";
}
}
</script>
</html>随机点名案例
随机点名小案例：点名案例在学会上一个案例后，很好理解
HTML源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点名普通版</title>
</head>
<!-- 页面加载完成时，调用dianming函数 -->
<body onl oad="dianming()">
<!-- 实现点名器(抽奖程序)
1) var arr=new Array("zhangsan,....") 创建一个数组存放原始数据
2)arr[random] 使用随机数生成数组下标
3) setInterval或 setTimeout 周期执行点名程序 -->
<div id="d1" >
<!-- 在此位置展示数据 -->
</div>
<!-- 点名调用dianming函数 ，与按钮绑定，我们自己定义的js函数-->
<input type="button" id="kaishi"value="重新点名" onclick="dianming()">
<!-- 结束调用ting函数 与按钮绑定，我们自己定义的js函数-->
<input type="button" id="ting" value="结束" onclick="ting()"/>
</body>
<script>
//封装一个获取元素对象的函数，方便后续使用
function $(obj){
return document.getElementById(obj);
}
//创建含有原始数据的数组
//可以修改数组中的数据
var arr=["zhangsan","lisi","wangwu","zhaoliu","qianqi"];
//设置标记变量并提高作用范围
var flag;
//点名函数
function dianming(){
//随机获取数组中的下标，并转换成整数
var name=parseInt(Math.random()*(arr.length-1));
//调用封装好的函数，修改标签中展示的内容
$("d1").innerText=arr[name];
//一段时间（设置时间为毫秒值1s=1000ms）后再次执行点名函数，因为setTimeout函数嵌套在dianming函数中
//其实是一个递归（自己调用自己的过程），会一直持续下去，直到我们点击按钮（绑定ting函数）取消递归
flag=setTimeout("dianming()",100);
}
//可以理解为结束递归的条件
function ting(){
clearTimeout(flag);
}
</script>
</html>随机点名案例图片版
图片版点名只是在随机点名的基础上将文本替换成img标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/myJS.js"></script>
</head>
<style>
img{
width: 100px;
width: 100px;
}
</style>
<body onl oad="dianming()">
<div style="margin: auto; width: 200px;">
<table>
<tr style="height: 100px; width: 100px;">
<div id="d1" style="width: 100px;height: 100px"></div>
</tr>
<tr>
<input type="button" id="kaishi"value="重新点名" onclick="dianming()">
<input type="button" id="ting" value="结束" onclick="ting()"/>
</tr>
</table>
</div>
</body>
<script>
var arr=["zhangsan","lisi","wangwu","zhaoliu","qianqi"];
var arrimg =[0,1,2,3,4,5,6,7,8,9];
function dianming(){
var name=parseInt(Math.random()*(arrimg.length-1));
//将图片命名为1.jpg等类似格式，与数组中存储数据要一一对应，注意图片路径，为自己的路径，使用字符串拼接即可
$("d1").innerHTML="<img src=img/"+name+".jpg>";
flag=setTimeout("dianming()",100);
}
function ting(){
clearTimeout(flag);
}
</script>
</html>标签：function,点名,绑定,value,JS,案例,flag,按钮,var From： https://blog.csdn.net/weixin_52937170/article/details/141724106以上是近来学习JS的一些小案例