标签：function 定时器 python 点击 let 按钮 input 列题
尝试编写JS时间案例
1.页面定时器案例
有一个input框 两个按钮 一个开始 一个结束
1.点击开始按钮 input内展示当前时间并按秒数刷新
2.点击结束按钮 input内展示停止
ps:写完之后测试有无bug 连续多次点击开始按钮 再试试能不能结束
思考如何解决
2.搜索框案例
input内有默认的文本值 用户一旦选择该input想做内容修改
就提前把内容清空
用js操作
1.页面定时器案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<input type="text" id="d1">
<input type="button" id="start" value="开始">
<input type="button" id="end" value="结束">
<script>
let inputEle = document.getElementById('d1');
// 1.先查找按钮标签
let startEle = document.getElementById('start');
let endEle = document.getElementById('end');
// 将存储循环定时任务的变量定位为全局变量
let t = null;
// 将展示时间的代码单独封装成一个函数
function showTime() {
// 3.获取当前时间
let currentTimeObj = new Date();
// 4.转换成格式化时间 便于用户查看 将上述时间添加到input框中
inputEle.value = currentTimeObj.toLocaleString();
}
// 2.给开始按钮绑定一个点击事件
startEle.onclick = function (){
if(!t){
t = setInterval(showTime, 1000)
}
}
// 给结束按钮绑定一个点击事件
endEle.onclick = function () {
// 结束循环定时任务
clearInterval(t)
t = null;
}
</script>
</body>
</html>
2.搜索框案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>默认值</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<input type="text" placeholder="周一综合征" id="d1">
<script>
let iEle = document.getElementById('d1')
iEle.onfocus = function () {
this.removeAttribute('placeholder')
}
iEle.onblur = function () {
this.setAttribute('placeholder','大爷下次再来哟')
}
</script>
</body>
</html>
用jQuery操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器|搜索框</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<!--定时器-->
<div>
<input id="u1" type="text" name="username">
<input type="button" id="s1" value="开始">
<input type="button" id="e1" value="结束">
<input type="text" placeholder="aaaaa" id="d1">
</div>
<script>
let $sEle = $("#s1")
let $uEle = $("#u1")
let $eEle = $("#e1")
//声明t并初始化t为空
let t = null
//给开始按钮绑定一个点击事件然后再里面加个循环定时器
$sEle.click(function (){
//判断当前有事件，则不执行。无，则执行。
if(!t){
t = setInterval(showTime, 1000);
}
})
//将修改值的封装成一个函数
function showTime(){
let currentDate = new Date();
$uEle[0].value = currentDate.toLocaleString();
}
//结束按钮绑定一个点击事件
$eEle.click(function (){
clearInterval(t)
//清空任何点击事件
t = null;
})
<!--搜索框-->
let $dEle = $("#d1")
$dEle.focus(function (){
this.removeAttribute('placeholder')
})
$dEle.blur(function (){
this.setAttribute('placeholder', '再见！！！！')
})
</script>
</body>
</html>
标签：function,
定时器,
python,
点击,
let,
按钮,
input,
列题
From： https://www.cnblogs.com/bjyxxc/p/16637716.html