2015-10-25 106 views
-1

我對此很新,希望你們中的一個能幫助我?我想要做的是在我的網頁上寫一個關鍵的快捷方式,這是可行的。我只是不知道我會如何循環以使所述人能夠多次使用此功能。我非常感謝任何幫助,也希望我不必過分注意jQuery。Javascript自定義keyshortcut循環故障

這是我的Javascript代碼:

function addZero(i) { 
    if(i < 10){ 
     i = "0" + i; 
    }; 
    return i; 
}; 

    var d = new Date(); 
     var h = addZero(d.getHours()); 
     var m = addZero(d.getMinutes()); 
     var text = "Press left arrow"; 
      var combo = h + ":" + m; 


var isRight=false; 
    document.onkeyup=function(e){ 
     if(e.which == 39) isRight=false;  
    };document.onkeydown=function(e){ 
     if (e.which == 39) isRight=true; 

     if(isRight == true){ 
       document.getElementById('Time_Shortcut').innerHTML = combo + "<br>" + text; 
       return false; 
      } else if(e.which == 37){ 
       document.getElementById('Time_Shortcut').style.display = "none"; 
      }; 
    }; 

我的HTML代碼

<p id="Time_Shortcut"></p> 

,只是爲它赫克,連同它的CSS。

#Time_Shortcut { 
    position: fixed; 
    opacity: .3; 
    padding: 20px; 
    font-family: "Lucida Console", Times, Serif; 
    color: #BD3A26; 
    text-decoration: none; 
    font-size: 22px; 
    left: 30px; 
    font-weight: bold; 
} 
    #Time_Shortcut:hover { 
     opacity: .45; 
    } 

謝謝你的時間,並提前抱歉,如果我搞砸了什麼。

回答

0

而不是在HTML中使用p標籤使用div並給它一個名稱然後引用你的div在你的函數,所以時間顯示在那裏。當你想要顯示使div可見時,當你想隱藏使div可見爲false時。我添加了嵌入式腳本和CSS的HTML解決方案。

<html> 
<head> 
</head> 
<body> 
<script> 
//////////////////////// 
///// create a div ///// 
//////////////////////// 
document.write('<div id="time" style="position: absolute; visibility:hidden; overflow:hidden; z-index=2; width: 200; height: 100; top:100; left:100; padding:0"></div>'); 

///////////////////////////////////// 
///// set backgtound of div red ///// 
///////////////////////////////////// 
time.style.backgroundColor="#ff0000"; 

/////////////////////////////////////////////// 
///// keyboard event listner    ///// 
///// on keypress goto function disptime ///// 
////////////////////////////////////////////// 

document.onkeypress = disptime; 

///////////////////////////// 
///// function disptime ///// 
///////////////////////////// 
function disptime(e) { 

/////////////////////////////////////////// 
///// get the charcode of key pressed ///// 
/////////////////////////////////////////// 

    evt = e || window.event; 
    var charCode = evt.keyCode || evt.which; 

/////////////////////////////////////////// 
///// if up or down arrow key pressed ///// 
/////////////////////////////////////////// 
if (charCode==38) 
{ 
    var d = new Date(); 

    var curr_hour = d.getHours(); 
    var curr_min = d.getMinutes(); 
    var c2 = document.getElementById("time"); 
    c2.style.visibility='visible'; 
    document.getElementById('time').innerHTML=(curr_hour + ":" + curr_min); 
} 

if (charCode==40) 
{ 
    var c2 = document.getElementById('time'); 
    c2.style.visibility='hidden'; 

} 
} 

</script> 

</body> 
</html> 
+0

所有的工作如圖所示,我只是不得不將它從document.onkeypress = disptime;到document.onkeydown = disptime;非常感謝你,你救了我很多頭痛。 – eBae

0

從我可以從您的描述中收集到的信息,您想要在網頁上檢測到一個按鍵,然後有一個java函數執行某些操作並將某些內容返回給網頁。

你能帶我完成用戶會做的步驟以及用戶看到完全理解你的問題的結果嗎?

+0

基本上,它目前被設定爲使沒有什麼,當你打開網頁,但如果您按下右箭頭鍵會以小時和分鐘開放時間,如果按向左箭頭鍵它會回去不顯示任何東西。這是完美的作品,但在我點擊左箭頭鍵使其無法顯示後,我無法按右鍵使其再次顯示時間。我需要幫助,試圖找出如何循環這兩個。感謝您的回覆:) – eBae

+0

很高興與您的項目合作愉快。有人可以請回答這個問題,並給我一些觀點。謝謝 – David