2016-03-17 2 views
-4

Мне нужна кнопка, которая показывает мне дату ниже, когда я использую курсор мыши над ней и скрывает ее, когда я курю мышь. Так же, как на картинке ниже:Каким будет основной код JavaScript для кнопки?

Example

+0

Объясните ваше требование ... присоединение оснастки не может быть способ задать вопрос .. – Moumit

+0

Возможный дубликат [ Использование кнопки html для вызова функции javascript] (http://stackoverflow.com/questions/1947263/using-an-html-button-to-call-a-javascript-function) – aribeiro

ответ

0

Вы можете прочитать больше о обработке в JavaScript с https://developer.mozilla.org/en/docs/Web/API/EventTarget/addEventListener события и скрипку с ним немного. Возможно, вам придется объявить двух слушателей на вашей кнопке, типах событий «mouseenter» и «mouseleave» (1-й аргумент addEventListener) и использовать алгоритмы по вашему выбору для выполнения в функциях слушателя (2-й аргумент addEventListener).

0

Это как вам нужно?

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
<p>SHOW/HIDE Date on mouseover</p> 
<input type="button" value="SHOW/HIDE Date on mouseover" onmouseover="show();" onmouseleave="hide();"> 
<p id="demo"></p> 
<script type="text/javascript"> 
    var show=function() 
    { 
      document.getElementById('demo').innerHTML=Date(); 
    }; 
    var hide=function() 
    { 
     document.getElementById('demo').style.display="none"; 
    }; 
</script> 
</body> 
</html> 
+0

, но это работает только один раз. Я снова паря его, он не работает. –

0

Добавьте немного JQuery:

Попробуйте это:

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
</head> 
<body> 
<input type="button" value="SHOW/HIDE Date on mouseover" onmouseover="show();" onmouseleave="hide();"> 
<p id="demo"></p> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $("input").mouseover(function(){ 
     $("p").show(document.getElementById("demo").innerHTML = Date()); 
    }); 
    $("input").mouseleave(function(){ 
     $("p").hide(); 
    }); 
}); 
</script> 
</body> 
</html> 
Смежные вопросы