百度输入法,大家都很熟悉了。
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>
更多推荐
百度输入法
发布评论