百度输入法

来源：互联网发布：厦门科华知乎编辑：程序博客网时间：2024/05/16 08:24

百度输入法，大家都很熟悉了。

javascript

<script>window.onload = function(){var oBtn = document.getElementsByTagName('button')[0];var oUl = document.getElementById('ime');var aLi = oUl.getElementsByTagName('li');var oResult = document.getElementById('result');var oTxt = '';oBtn.onclick = function(){oUl.style.display = oUl.style.display == 'block' ? 'none' : 'block';}for(var i=0; i<aLi.length; i++){aLi[i].onclick = function(){if(this.id == 'close'){oUl.style.display = "none";}else{oTxt = '';oTxt = this.innerHTML;}oResult.innerHTML = oTxt;}}}</script>

html

<div id="outer"><div id="result"></div>    <button>输入法</button>    <ul style="display: none;" id="ime">        <li><a href="javascript:;">手写</a></li>        <li><a href="javascript:;">拼音</a></li>        <li id="close"><a href="javascript:;">关闭</a></li>    </ul></div>

css

<style>body,ul,li,button{margin:0;padding:0;}body{font:14px/1.5 Tahoma;}ul{list-style-type:none;}a{text-decoration: none; color:#333;}button{cursor:pointer;}#outer{width:70px;margin:10px auto;}#ime{margin-top:5px;background:#fff;border:1px solid #9a99ff;display:none;}#ime li{width:100%;line-height:24px;display:inline-block;vertical-align:top;}#close{border-top:1px solid #9a99ff;}#ime li a{padding:0 5px; display:block;text-decoration:none;}#ime li a:hover{background:#d9e1f6;} </style>

0 0