我技术不硬，最近遇到了一个问题，就是动态的让获取到的时间动态的变化，以防万一又犯同样的错误，因此记下来好查找。也希望对大家有帮助。
注意：这是我个人的理解，如果有错请见谅，您可以在评论中指出，谢谢。
首先我们来了解一下setTimeout和setInterval这两个方法。
setTimeout
setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。(在指定的延迟时间之后调用一个函数或者执行一个代码片段。)
举个例子：
setTimeout("alert('hello')",5000)在你打开页面之后，过了5秒就会出现弹框，之后就不会再弹了。
setTimeout的使用方法：
setTimeout(code,millisec)
//code 要调用的函数后要执行的javascript代码串
//millisec 在执行代码需等待的毫秒数
下面这些是我所收集的和测试的，可以运行，我简单的理解为：
//写法1:可以直接执行代码
setTimeout("要执行的代码",等待的毫秒数) //1000为1s
//写法2、可以执行函数
setTimeout("函数对象",等待的毫秒数)
//3
setTimeout(function(){},等待的毫秒数)
//4
setTimeout(函数名,等待的毫秒数)
//5
setTimeout(alert('123'),等待的毫秒数)
例子:
//打开页面5秒后弹出弹框。
//写法一
setTimeout("alert('hello')",5000)
//写法二
setTimeout("date()",5000)
function date(){
alert('hello');
}
想要停止setTimeout，可以使用clearTimeout()方法，它可以取消由 setTimeout() 方法设置的 timeout。一般都是通过事件或条件来配合使用，不明白咋们就举个例子
html:
<form>
<input type="text" id="inp1">
<input type="button"onc; onclick="clearTimeout(tt)" value="暂停">
</form>
//只要单击暂停，timeout就会被取消，数字就不会再继续增加了。
js:
<script>
var i = 0; //默认数值
function sum(){
i = i + 1;
document.getElementById('inp1').value = i;
tt = setTimeout("sum()",1000) //tt为setTimeout.
}
sum()
</script>
我们需要做的动态时间，一般都是使用setTimeout来实现的，但setTimeout只会调用一次，那怎么实现动态时间呢？
方法：
<p></p>function start(){
var date = new Date()
var h = date.getHours() //时
var m = date.getMinutes() //分
var s = date.getSeconds() //秒
document.querySelector('p').innerHTML = h+':'+m+':'+s
t = setTimeout("start()",1000)
}
start() //调用这样，只要代码一执行，就可以每过一秒更新一次了。
但如果用setTimeout来做计数器的话，会出现一个问题，就是连续点击开始计数会出现数字跳动频率变快了，其实并不是变快了，而是生成了多个计时器，每点一次就加多一个。那该怎么解决？
解决方法：
<input type="text"name="" value="">
<button onclick="start()">开始</button>var input = document.querySelector('input')
var i = 1
var t
function start(){
clearTimeout(t) //不管有没有timeout，都先clear掉。
input.value = i;
i++
t = setTimeout("start()",1000)
}
这样就不会生成多个了。但还会遇到新的问题，就是每次点击后都会立马加一的这种情况，所以，
解决方法：
var input = document.querySelector('input')
var i = 1
var t;
function start(can){
can = can || false
if(!can){ //取反
clearTimeout(t)
}else{
input.value = i;
++i
}
t = setTimeout(function(){
start(true)},1000)
}但还是存在问题，连续单击会发现数字不会增加，除了禁用按钮外，我暂时找不到解决办法，现在仍在找，如果大家知道怎么做，请务必告诉我，先谢谢大家了。
setInterval
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。（会一直执行到被clearInterval或者窗口被关掉）
举个例子
setInterval('alert("Hello");', 1000);当你打开页面后过一秒就会出现弹窗，再过一秒继续弹。
setInterval的用法
用法也和setTimeout差不多，就不举例子了（人懒 ^_^）
setInterval(code, milliseconds);
//code 要调用的函数后要执行的javascript代码串
//millisec 在执行代码需等待的毫秒数
setInterval(function, milliseconds, param1, param2, ...)
//param1, param2, ... 不是必须的， 传给执行函数的其他参数（IE9 及其更早版本不支持该参数）。
setInterval做动态时间很简单，就直接setInterval(fun(),1000)就ok了。就用我做我项目时打的代码做例子吧！
var time2 = setInterval(date2,1000) //就直接一句话就ok了。
function date2(){
//本人能力有限，获取本地时间
var date1 = new Date()
var hour = date1.getHours()
//获取分
var min = date1.getMinutes()
//秒，用来测试时候在运行，所以不重要
var s = date1.getSeconds()
//个位数时在十位补零。
var hour1 = date1.getHours().toString().padStart(2, "0");
var minute = date1.getMinutes().toString().padStart(2, "0");
document.getElementById("realtime").innerHTML = hour1+':'+minute
}
计时器的实现直接在函数里累加就行了，可以去这网站看看点这
连续单击会发现数字不会增加，除了禁用按钮外，我暂时找不到解决办法，现在仍在找，如果大家知道怎么做，请务必告诉我，先谢谢大家了。
注意：不太建议使用setInterval，因为它不会去管你的代码对错，也不会管是否有网络延迟，会不断的执行，很容易造成卡死。
