Cette fois, je vais vous présenter une introduction approfondie aux minuteries JavaScript. Quelles sont les précautions lors de l'utilisation des minuteries JavaScript Voici des cas pratiques, jetons un coup d'œil.
Obtenez l'année, le mois, le jour, la semaine, l'heure, la minute et la seconde
<script>
var date = new Date()
date.getFullYear(); //2017 年
date.getMonth(); // 5 注意:月份是个诡异的东西,他是从0开始计算的,故+1才等于正常的月份
date.getDate(); //11 日
date.getDay(); //星期 美国的星期是从星期日开始的,故0为星期日,1为星期一,...6为星期六
date.getHours(); //时
date.getMinutes(); //分
date.getSeconds(); //秒
</script>2 Minuterie
setInterval Type d'intervalle : combien de millisecondes doivent être exécutées chaque. time
setTimeout Type de délai : Delay Combien de ms faudra-t-il pour s'exécuter
La différence entre les deux minuteries :
type d'intervalle setInterval, peut être exécuté plusieurs fois
setTimeout delay type, exécuté une seule fois
<script>
function show() {
alert('定时器');
}// setInterval(show,1000); // 一秒执行一次
setTimeout(show,1000); //延时一秒执行
</script>Activer le timer setInterval()
var btn1 = document.getElementById('btn1');var btn2 = document.getElementById('btn2');var i = 0;var timer = null;
btn1.onclick = function () { //开启定时器
timer = setInterval(function () {
i++;
alert(i);
},1000);
}Fermer le timer clearInterval(timer);
btn2.onclick = function () {
i = 0;
clearInterval(timer);
}3. >
str[0];不兼容低版本浏览器,如IE7等; var a = 'abcdef';alert(a[0]); str.charAt(0); 兼容各种浏览器 var a = 'abcdef';a.charAt(0); //兼容各种浏览器
<html lang="en"><head>
<meta charset="UTF-8">
<title>数字时钟</title>
<style>
body{ background-color: black; font-size: 50px; color: white;
} </style>
<script>
window.onload = function () { var aImg = document.getElementsByTagName('img'); function tick() { var date = new Date(); //把时间拼接成一个字符串,如:212835;
//toDouble()这个函数,是为了把单数转换成双位数,如,9转换成09
var sTime = toDouble(date.getHours()) + toDouble(date.getMinutes()) + toDouble(date.getSeconds()); for (var i=0;i<aImg.length;i++){
aImg[i].src = 'image/'+sTime.charAt(i)+'.png';
}
}
setInterval(tick,1000);
tick(); //由于setInterval会延时1000ms执行,所以为了防止每次刷新页面时,页面上显示00:00:00的情况,调用下此函数
} //把获取的时/分/秒 转换成双位数
function toDouble(n) { if (n<10){ return '0' + n;
}else { return '' +n;//前面的'',是为了把数字转换成字符串
}
} </script></head><body>
:
:
</body></html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>07-延时提示框</title> <style> div{float: left;margin-left: 20px;} #div1{width: 50px;height: 50px;background-color: red;} #div2{ width: 200px;height: 200px;background-color: #ccc;display: none;} </style> <script> window.onload = function () { var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var timer = null; oDiv1.onmouseover = function () { oDiv2.style.display = 'block'; clearTimeout(timer); //清除延时器 } oDiv1.onmouseout = function () { timer = setTimeout(function () { oDiv2.style.display = 'none'; },500); } oDiv2.onmouseover = function () { clearTimeout(timer); } oDiv2.onmouseout = function () { timer = setTimeout(function () { oDiv2.style.display = 'none'; },500); } } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html><html lang="en"> <head> <meta charset="UTF-8"> <title>07-延时提示框</title> <style> div{float: left;margin-left: 20px;} #div1{width: 50px;height: 50px;background-color: red;} #div2{ width: 200px;height: 200px;background-color: #ccc;display: none;} </style> <script> window.onload = function () { var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var timer = null; //简化代码,合并两个相同的mouseover oDiv2.onmouseover = oDiv1.onmouseover = function () { oDiv2.style.display = 'block'; clearTimeout(timer); } //简化代码,合并两个相同的mouseout oDiv2.onmouseout = oDiv1.onmouseout = function () { timer = setTimeout(function () { oDiv2.style.display = 'none'; },500); } } </script> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> </html><html><head><meta charset="utf-8"><title>无缝滚动</title><style>* {margin:0; padding:0;}#div1 {width:712px; height:108px; margin:100px auto; position:relative; background:red; overflow:hidden;}#div1 ul {position:absolute; left:0; top:0;}#div1 ul li {float:left; width:178px; height:108px; list-style:none;}</style><script>window.onload=function (){ var oDiv=document.getElementById('div1'); var oUl=oDiv.getElementsByTagName('ul')[0]; var aLi=oUl.getElementsByTagName('li');
var speed=-2;
//oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
oUl.innerHTML+=oUl.innerHTML;
oUl.style.width=aLi[0].offsetWidth*aLi.length+'px'; //offsetWidth :(width+padding+border) 当前对象的宽度。
//offsetLeft 当前对象到其上级层左边的距离。
function move(){ //往左滚动
if(oUl.offsetLeft<-oUl.offsetWidth/2)
{
oUl.style.left='0';
} //往右滚动
if(oUl.offsetLeft>0)
{
oUl.style.left=-oUl.offsetWidth/2+'px';
} //offsetLeft 距离父元素左侧距离
oUl.style.left=oUl.offsetLeft+speed+'px';
} //定时器
var timer=setInterval(move, 30);
oDiv.onmouseover=function () {
clearInterval(timer);
};
oDiv.onmouseout=function () {
timer=setInterval(move, 30);
}; //往左滚动
document.getElementsByTagName('a')[0].onclick=function () {
speed=-2;
}; //往右滚动
document.getElementsByTagName('a')[1].onclick=function () {
speed=2;
};
};</script></head><body><a href="javascript:;">向左走</a><a href="javascript:;">向右走</a><div id="div1">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></div></body></html>Application de base approfondie de JavaScript
8 connaissances de base de JS auxquelles il faut prêter attention à
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
