Ferris教程学习笔记:js示例2.6 百度输入法

最新推荐文章于 2024-07-30 10:56:44 发布

weixin_33701251

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量97

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/kaka100/p/3469853.html

版权

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=gbk">
 4 <title>百度输入法</title>
 5 <style type="text/css">
 6 body,ul,li,button{margin:0;padding:0;}
 7 body{font:12px/1.5 Tahoma;}
 8 ul{list-style-type:none;}
 9 button{cursor:pointer;}
10 
11 #outer{width:70px;margin:10px auto;}
12 #ime{margin-top:5px;background:#fff;border:1px solid #9a99ff;display:none;}
13 #ime li{width:100%;line-height:24px;display:inline-block;vertical-align:top;}
14 #close{border-top:1px solid #9a99ff;}
15 #ime li a{color:#00c;padding:0 5px;display:block;text-decoration:none;}
16 #ime li a:hover{background:#d9e1f6;}
17 </style>
18 </head>
19 <body>
20 <div id="outer">
21   <button>输入法</button>
22   <ul style="display:none;" id="ime">
23     <li><a href="javascript:;">手写</a></li>
24     <li><a href="javascript:;">拼音</a></li>
25     <li id="close"><a href="javascript:;">关闭</a></li>
26   </ul>
27 </div>
28 <script type="text/javascript">
29  window.onload = function(){
30     var button = document.getElementsByTagName("button")[0];
31     var ime = document.getElementById("ime");
32     var oclose = document.getElementById("close"); 
33     button.onclick = function(){
34       //这个表达式请注意看..
35       //
36       ime.style.display =  ime.style.display == "block" ? "none" : "block";
37     };
38     oclose.onclick = function(){
39      ime.style.display  = "none";
40     }
41     
42     
43     
44     
45  }
46 </script>
47 </body>
48 </html>

转载于:https://www.cnblogs.com/kaka100/p/3469853.html

weixin_33701251

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ferris教程学习笔记:js示例2.6 百度输入法

1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"><head>...
复制链接

扫一扫