啧啧啧，又到月末了，时间过的真的好快啊︿(￣︶￣)︿现在没课上，天天宅在寝室就这么三件事：吃饭睡觉打豆豆。真感无所事事，无聊至极！突然好怀念那些上课的日子啊！至少不像现在，生活状态全部都搅乱了：以前可以按时吃饭睡觉，现在吃饭基本不按点，睡觉时间也是晚睡晚起了，发现自己懒了好多啊。这样下去是不行的，我要把“懒惰”两个字从我的字典里抹去！勤奋的鸟儿才有虫吃！我觉得我没有严格约束自己，我还是要调整好生活状态，不能这样“放荡不羁爱自由”。

现在还有时间，就要多学习，因为以后再也没有这么好的条件了。所以我计划，十一月，我要拿到驾照，边写博客边做毕业设计，这几件事都不能误。

好了，早点休息，不能再熬夜了（最近就是因为熬夜到凌晨两三点才睡觉所以黑眼圈都好几圈了），晚安，好梦。

我也不知道什么原因，莫名我就喜欢黑绿。所以我又把之前做过的JavaScript之简单搜索按钮改动了一下下，duangduagnduang~~(*^▽^*)

<style type="text/css">
input {
border: 2px solid #00FF00;
font-size: 1.5em;
padding: .25em .5em .3125em;
color: #00FF00;
border-radius: .25em;
background: transparent;
-webkit-transition: all .10s;
transition: all .10s;
}
input:focus {
outline: none;
color: #00FF00;
border-color: #00FF00;
}
input.keyup {
color: #00FF00;
border-color: #00FF00;
text-shadow: 0 0 .125em #00FF00;
box-shadow: 0 0 .25em white,inset 0 0 .25em #00FF00;
}

body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}

canvas {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
pointer-events: none;
}

input {
font-family: "Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif;
}

::-webkit-input-placeholder {
color: #5E6C77;
text-shadow: 0 0 .125em transparent;
-webkit-transition: all .25s;
transition: all .25s;
}

input:focus::-webkit-input-placeholder {
opacity: .5;
}

::-moz-placeholder {
color: #5E6C77;
text-shadow: 0 0 .125em transparent;
-webkit-transition: all .25s;
transition: all .25s;
}

input:focus::-moz-placeholder {
opacity: .5;
}

:-ms-input-placeholder {
color: #5E6C77;
text-shadow: 0 0 .125em transparent;
-webkit-transition: all .25s;
transition: all .25s;
}

input:focus:-ms-input-placeholder {
opacity: .5;
}

html, body {
height: 100%;
overflow: hidden;
}

html {
background: #000000;
}
</style>
</head>
<body>
<form action="http://www.baidu.com/s" target="_blank">
<input type="text" size=30 maxlength="100" name="word">
<input type="submit" class="btn" value="百度一下">
<input type="reset" value="重新输入">
</form>
<script type="text/javascript" src="http://files.cnblogs.com/files/caidupingblogs/search.js"></script>
</body>

JavaScript之搜索框的更多相关文章

  1. ArcGIS API for javascript中搜索框的使用问题

    我们在开发中常常需要用搜索框去搜索地图上的某个数据,然后在地图上显示出来.这个时候我们要用到esri.dijit.Search().在设置里面的sources的时候,需要注意一点:必须要使用在线的fe ...

  2. Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释

    前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...

  3. JavaScript实现模糊推荐的input框(类似百度搜索框)

    如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...

  4. Javascript实例 -- 计时器, 搜索框,selected联动

    计时器: <body> <input type="text" id="i1"> <input type="button& ...

  5. 原生JavaScript实战之搜索框筛选功能

    成品图如下所示: 先搭建HTML结构: <div class="wrapper"> <div class="sWrapper"> < ...

  6. weui 搜索框

    点击搜索,会显示关键字取消按钮,输入文字,会在搜索框下,有相应的列表显示. HTML: <!DOCTYPE html> <html> <head> <meta ...

  7. 用jsonp实现搜索框功能

    用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...

  8. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  9. jQuery+HTML5弹出创意搜索框层

    效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...

随机推荐

  1. onethink重新安装后，还原数据库后，登陆不了解决办法！

    在用onethink开发的时候,为了防止修改出错,我会在开发下一个功能的对上一个功能代码整体进行备份,如果出错就返回上一个版本再次修改. 但是会发现一个问题,如果如果返回到上一个版本,重新安装完成之后 ...

  2. 三维凸包求重心到面的最短距离（HDU4273）

    http://acm.hdu.edu.cn/showproblem.php?pid=4273 Rescue Time Limit: 2000/1000 MS (Java/Others)    Memo ...

  3. 安装 sql server 2008出现重启电脑，另在server 2012 r2安装sql server 2008 安装不上

    时即使是进行电脑重启,也会报这个错误,那么就不是电脑的问题了,其实是系统注册表在作怪,解决方法如下: 1.开始-->运行,输入regedit,打开注册表管理器: 2. 找到 HKEY_LOCAL ...

  4. [Android Tips] 31.如何将第三库引入的 Permission 删除掉

    Just declare the incriminated permission in your (main) Manifest with the tools:node="remove&qu ...

  5. 【ES6】001---module模块------【巷子】

    001.前言 什么是模块化开发?   为了提高代码的复用度,开发人员会按照功能把大量的js代码分成若干文件,这样在多个页面就可以使用同一个文件了.,下面是某个网站的js引用情况 怎么会有这么多js文件 ...

  6. Jquery Uploadify使用参数详解

    开始上传  $('#uploadify_1').uploadifyUpload(); 1 uploader uploadify.swf文件的相对路径,该swf文件是一个带有文字BROWSE的按钮,点击 ...

  7. SaltStack生产案例-系统初始化

    需求分析 一,系统初始化 1.1  关闭SELinux 1.2  关闭默认iptables 1.3  时间同步(配置NTP)  1.4  文件描述符(必备/etc/security/limmits.c ...

  8. linux IO多路复用POLL机制深入分析

    POLL机制的作用这里就不进行介绍,根据linux man手册,解释为在一个文件描述符上等待某个事件.按照抽象一点的理解,当某个事件被触发(条件被满足),文件描述符变为有状态,那么用户空间可以根据此进 ...

  9. day08：软件系统的体系结构&Tomcat详解&Web应用&http协议

        day08 软件系统体系结构     常见软件系统体系结构B/S.C/S 1.1 C/S C/S结构即客户端/服务器(Client/Server),例如QQ: 需要编写服务器端程序,以及客户端 ...

  10. centos linux 系统日常管理4 scp,rsync,md5sum,sha1sum,strace ,find Rsync 常见错误及解决方法 第十七节课

    centos linux 系统日常管理4  scp,rsync,md5sum,sha1sum,strace ,find Rsync 常见错误及解决方法  第十七节课 rsync可以增量同步,scp不行 ...