[读码时间] 百度输入法
说明:代码来自网络。注释为笔者学习时添加。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>百度输入法</title> <style> body,ul,li,button{ /*去掉内外边距*/ margin:0; padding:0; } body{ font:12px/1.5 Tahoma; /*字号行高字号*/ } ul{ list-style-type:none; /*无序列表去掉样式*/ } button{ cursor:pointer; /*鼠标手形*/ } #outer{ width:70px; margin:10px auto;/*左右置中*/ } #ime{ margin-top:5px; /*上外边距5像素*/ background:#fff; /*白色*/ border:1px solid #9a99ff; /*边框蓝色*/ display:none; /*默认为隐藏*/ } #ime li{ /*后代元素选择法*/ width:100%; line-height:24px; /*行高*/ display:inline-block; /*行内块元素*/ } #ime li a:hover{ background:#d9e1f6; /*浅蓝色*/ } </style> <script> window.onload = function () { var oBtn = document.getElementsByTagName("button")[0]; //获取按钮集合中的第1个 var oIme = document.getElementById("ime");//获取无序列表引用 var oClose = document.getElementById("close"); //获取关闭li元素引用 var style = oIme.style; //把ul列表的样式属性赋值给本地变量 style oBtn.onclick = function () { style.display = style.display == "block" ? "none" : "block";//三元操作法,切换样式以达到显示/隐藏目的 }; oClose.onclick = function () {//注册click事件,点击后隐藏整个无序列表 style.display = "none"; } } </script> </head> <body> <!--div包裹一个button和无序列表ul--> <div id="outer"> <button>输入法</button> <ul id="ime"> <li><a href="javascript:;">手写</a></li> <li><a href="javascript:;">拼音</a></li> <li id="close"><a href="javascript:;">关闭</a></li> </ul> </div> </body> </html>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战