suchen

Heim >Web-Frontend >js-Tutorial >Anwendungsbeispielcode-Analyse der JS-Verzögerer-Eingabeaufforderung box_javascript Fähigkeiten

Anwendungsbeispielcode-Analyse der JS-Verzögerer-Eingabeaufforderung box_javascript Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:03:331578Durchsuche

Ohne weitere Umschweife werde ich einfach den Code für Sie veröffentlichen. Der spezifische Code lautet wie folgt: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延时显示提示框</title>
<style>
#div1 {
float: left;
width: 60px;
height: 60px;
background-color: aqua;
}
#div2 {
position: relative;
float: left;
margin: 0 10px;
width: 200px;
height: 200px;
background-color: #cccccc;
display: none;
}
</style>
<script>
window.onload = function () {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer = null;
// oDiv1.onmouseover = function () {
// clearTimeout(timer);
// oDiv2.style.display = 'block'; //鼠标移入div1时显示div2
// };
//
// oDiv1.onmouseout = function () {
// timer = setTimeout(function () {
// oDiv2.style.display = 'none'; //鼠标移除div1时隐藏div2
// }, 500); //为了从div1移入div2,所以移出div1时div2隐藏应该有一个延时设置
// };
//
// oDiv2.onmouseover = function () {
// clearTimeout(timer); //清除延时器设置,当鼠标移入div2时,div2应当显示
// };
//
// oDiv2.onmouseout = function () {
// timer = setTimeout(function () {
// oDiv2.style.display = 'none'; //当鼠标移出div2时,div2应当隐藏
// }, 500); //当鼠标移出div2并移入div1时,div2会闪烁一下再显示,设置一个延时,清除闪烁的效果;
// // 但是设置延时器之后,鼠标移入div1时,div2却隐藏了,原因是setTimeout,
// // 应当清除延时器,在oDiv1.onmouseover事件中添加,清除延时器的代码
// };
// 由于这四个事件中代码两两对应地相同或相似,可以做如下简化处理:
oDiv1.onmouseover = oDiv2.onmouseover = function () {
clearTimeout(timer);
oDiv2.style.display = 'block';
/* 鼠标移入div1时显示div2,虽然oDiv2.onmouseover事件中没有写oDiv2.style.display = 'block';
但是实际上oDiv2是'block'状态,多写一句代码没有实质性影响*/
};
oDiv1.onmouseout = oDiv2.onmouseout = function () {
timer = setTimeout(function () {
oDiv2.style.display = 'none'; //鼠标移除div1时隐藏div2
}, 500); //为了从div1移入div2,所以移出div1时div2隐藏应该有一个延时设置
};
// 简化后的代码执行结果跟前面的代码效果完全一致.
}
</script>
</head>
<body>
<h2>延时提示框</h2>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

Die Punkte, auf die beim Schreiben der Verzögerungsaufforderungsbox geachtet werden muss, sind in den Kommentaren aufgeführt. Diese Funktion ist nach dem Ansehen des Video-Tutorials relativ einfach zu implementieren dass vor dem Schreiben des Codes eine Liste der erforderlichen Funktionen erstellt wird. Es ist viel besser, sie einzeln gemäß der Liste zu implementieren und bei auftretenden Problemen entsprechende Anpassungen vorzunehmen, als Code direkt zu schreiben.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript implementiert Code_Javascript-Fähigkeiten für Spezialeffekte im Eingabeaufforderungsfeld mit verzögerter AnzeigeNächster Artikel：Javascript implementiert Code_Javascript-Fähigkeiten für Spezialeffekte im Eingabeaufforderungsfeld mit verzögerter Anzeige

In Verbindung stehende Artikel

Mehr sehen