小劉同窗的第三十三篇博文

時間 2019-11-30

標籤同窗第三十三博文简体版

原文原文鏈接

　　一天了，都下着很冷很冷的雨啊...氣溫降低了不少喲，小夥伴們要照顧好本身(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝhtml

　　今天仍是沒有能堅持2個小時的學習時間，天天晚上拿出2個小時來學前端很難麼？不難啊，真的不難啊，爲何作不到呢？？？老是被各類各樣的事情耽誤，本身沒有跳脫一種狀態的環境，明明知道應該來圖書館自習了，可仍是在和學弟聊天侃大山……前端

　　今天把昨天那個右鍵菜單的題目寫完了，果真本身看一遍別人的代碼，本身再敲一遍的時候就。。。很傷。。。仍是得一邊看着別人的代碼，一邊本身寫一點，這樣才行。。。dom

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>homework2</title>
  6     <style>
  7         #menu {
  8             padding: 0;
  9             margin: 0;
 10             list-style: none;
 11             border: 1px solid #ccc;
 12             height: 200px;
 13             width: 150px;
 14         }
 15         #menu li {
 16             height: 39px;
 17             border-bottom: 1px solid #ccc;
 18             line-height: 39px;
 19             text-align: center;
 20         }
 21         #menu li:hover{
 22             background-color: #abcdef;
 23         }
 24         #menu li:hover a {
 25             color: white;
 26         }
 27         #menu li a {
 28             text-decoration: none;
 29             color: #000;
 30             font-size: 14px;
 31         }
 32         /*子菜單樣式*/
 33         #rightMenu {
 34             padding: 0;
 35             margin: 0;
 36             list-style: none;
 37             border: 1px solid #ccc;
 38             height: 120px;
 39             width: 90px;
 40             display: none;
 41             position: absolute;
 42             background-color: gray;
 43         }
 44         #rightMenu li {
 45             height: 23px;
 46             border-bottom: 1px solid #ccc;
 47             line-height: 23px;
 48             text-align: center;
 49         }
 50         #rightMenu li:hover{
 51             background-color: #badcfe;
 52         }
 53         #rightMenu li:hover a {
 54             color: white;
 55         }
 56         #rightMenu li a {
 57             text-decoration: none;
 58             color: #000;
 59             font-size: 10px;
 60         }
 61     </style>
 62 </head>
 63 <body>
 64 <!-- 
 65 /**
 66  * 
 67  * @author: xiaoliu
 68  * @type: NO.17-homework2
 69  * @data: 2018-01-23
 70  * @finished: 2018-01-25
 71  * 
 72  */
 73  -->
 74 <ul id="menu">
 75     <li><a href="#">角色受權</a></li>
 76     <li><a href="#">數據字典管理</a></li>
 77     <li><a href="#">菜單管理</a></li>
 78     <li><a href="#">資源管理</a></li>
 79     <li><a href="#">系統管理</a></li>
 80 </ul>
 81 <ul id="rightMenu">
 82     <li><a href="#">子角色</a></li>
 83     <li><a href="#">子字典</a></li>
 84     <li><a href="#">子菜單</a></li>
 85     <li><a href="#">子資源</a></li>
 86     <li><a href="#">子系統</a></li>
 87 </ul>
 88 <script>
 89     window.onload = function () {
 90         var rMenu = document.getElementById("rightMenu");
 91         document.getElementById("menu").oncontextmenu = function (event) {
 92             //首先，把右鍵菜單顯示出來
 93             rMenu.style.display = "block";
 94             //再用event對象中的值，把菜單的定位值計算出來
 95             //event.pageX 能定位鼠標的left值
 96             //event.pageY 能定位鼠標的top值
 97             //像素的賦值必定要注意單位啊啊啊啊啊啊啊 + "px" + "px" + "px"
 98             rMenu.style.left = event.pageX + "px";
 99             rMenu.style.top = event.pageY + "px";
100             //最後，把browser自帶的右鍵禁止掉
101             return false;
102         }
103         //在最後的最後，也就是點擊看到rMenu以後，當再次點擊時，再把rMenu隱藏
104         //這裏其實沒想到是直接dom.onclick.....
105         document.onclick = function () {
106             rMenu.style.display = "none";
107         }
108     }
109 </script>
110 </body>
111 </html>