第一步，实现百度输入法的页面布局

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5.     <title>百度输入法</title>
  6.     <style>
  7. body,ul,li,button{margin:0;padding:0;}
  8. body{font:12px/1.5 Tahoma;}
  9. ul{list-style-type:none;}
  10. button{cursor:pointer;}
  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 id="ime">
  23. <li><a href="javascript:;">手写</a></li>
  24. <li><a href="javascript:;">拼音</a></li>
  25. <li id="class"><a href="javascript:;">关闭</a></li>
  26. </ul>
  27. </div>
  28. </body>
  29. </html>

第二步，用js实现功能

  1. <script>
  2. window.onload = function ()
  3. {
  4.     var oBtn = document.getElementsByTagName("button")[0];
  5.     var oIme = document.getElementById("ime");
  6.     var oClose = document.getElementById("close");
  7.     var style = oIme.style;
  8.     oBtn.onclick = function()
  9.     {
  10.         style.display = style.display == "block" ? "none" : "block"
  11.     };
  12.     oClose.onclick = function()
  13.     {
  14.         style.display = "none"
  15.     }
  16. }
  17. </script>

获取当前时间

http://tylerfrankenstein.com/user/4/code/javascript-date-time-yyyy-mm-dd-hh-mm-ss

http://jsfiddle.net/#&togetherjs=yIPGEeES1c

Javascript 常用的更多相关文章

  1. JavaScript 常用功能总结

    小编吐血整理加上翻译,太辛苦了~求赞! 本文主要总结了JavaScript 常用功能总结,如一些常用的JS 对象,基本数据结构,功能函数等,还有一些常用的设计模式. 目录: 众所周知,JavaScri ...

  2. select元素javascript常用操作 转

    /*------------------------------------------------------ *作者:xieyu @ 2007-08-14 *语言:JavaScript *说明:s ...

  3. 第二篇、JavaScript常用的API

    下面是我整理的一些JavaScript常用的API清单. 目录 元素查找 class操作 节点操作 属性操作 内容操作 css操作 位置大小 事件 DOM加载完毕 绑定上下文 去除空格 Ajax JS ...

  4. JavaScript常用正则表达式与应用（一）

    JavaScript的String类和RegExp对象类都定义了相关方法使用正则表达式进行模式匹配,本文将以连载方式介绍JavaScript常用正则表达式与相关应用,欢迎交流 本节是连载一,首先介绍J ...

  5. javascript常用代码大全

    http://caibaojian.com/288.html    原文链接 jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_ca ...

  6. Javascript 常用函数【3】

    jquery选中radio //如果之前有选中的,则把选中radio取消掉 $("#tj_cat .pro_category").each(function() { if ($(t ...

  7. javascript常用知识点集

    javascript常用知识点集 目录结构 一.jquery源码中常见知识点 二.javascript中原型链常见的知识点 三.常用的方法集知识点 一.jquery源码中常见的知识点 1.string ...

  8. javascript常用的Math对象的方法

    简介 Math对象是在程序编程中用于执行一些数学任务的.Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数, ...

  9. JavaScript常用对象有哪些

    JavaScript常用对象有哪些 1.String 2.Date 3.Math 4.Array 5.Number 6.Boolean

  10. JavaScript常用函数

    JavaScript常用函数 常规函数 数组函数 日期函数 数学函数 字符串函数 常规函数 (1)alert函数:显示一个警告对话框,包括一个OK按钮.(alert("输入错误") ...

随机推荐

  1. Android的读写文件权限

    设置文件生成的权限: public static boolean saveInfo( Context context, String userName, String userPass, int mo ...

  2. poj 3641 Pseudoprime numbers（快速幂）

    Description Fermat's theorem states that for any prime number p and for any integer a > 1, ap = a ...

  3. react-native 自己搭建热更新服务器

    使用到的框架是 react-native-update react-native-update-cli 这个应该执行热更新的时候的终端命令. 通过这个,自己搭建一个热更新的服务器.

  4. HTML5新特性学习-2

    本文在于巩固基础 HTML5绘图基础 <canvas>画布元素的使用 <div> <canvas id="can" width="200px ...

  5. matlab中norm与svd函数用法

    格式:n=norm(A,p) 功能:norm函数可计算几种不同类型的矩阵范数,根据p的不同可得到不同的范数 以下是Matlab中help norm 的解释: NORM Matrix or vector ...

  6. JS判断表单内容是否更改过

    1,根据具体标签判断 function JudgesubmitForm() { var judjeWs = false; var judjeAt = false; var judjeWd = fals ...

  7. css层叠机制说明

    css通过建立与文档的关联而实施效果.文档结构重要性不言而喻,对于建立良好的内容索引.提高可维护性.较好的可访问性:另,利于css选择器选择.继承机制. 概要地讲,层叠机制是处理对文档上应用样式时解决 ...

  8. effective c++ 条款06 不想自动生成函数,就明确拒绝

    编辑器会主动的生成三个/五个函数,如果不需要我们应该主动拒绝 使用私有属性来拒绝 ``` include int main() { return 0; } ``` 使用继承的方式来拒绝

  9. Scala基础入门－1

    首先需要Scala开发环境的搭建,网上自己找教程. 声明常量与变量 val foo = 0 // 常量 var bar = 0 // 变量 在Scala中,更加鼓励使用val来进行声明,也就是推荐使用 ...

  10. ListView多选操作模式——上下文操作模式

    1.什么叫上下文操作模式 2.如何进入上下文操作模式 1.ListView自身带了单选.多选模式,可通过listview.setChoiceMode来设置: listview.setChoiceMod ...