JavaScript之搜索框
啧啧啧,又到月末了,时间过的真的好快啊︿( ̄︶ ̄)︿现在没课上,天天宅在寝室就这么三件事:吃饭睡觉打豆豆。真感无所事事,无聊至极!突然好怀念那些上课的日子啊!至少不像现在,生活状态全部都搅乱了:以前可以按时吃饭睡觉,现在吃饭基本不按点,睡觉时间也是晚睡晚起了,发现自己懒了好多啊。这样下去是不行的,我要把“懒惰”两个字从我的字典里抹去!勤奋的鸟儿才有虫吃!我觉得我没有严格约束自己,我还是要调整好生活状态,不能这样“放荡不羁爱自由”。
现在还有时间,就要多学习,因为以后再也没有这么好的条件了。所以我计划,十一月,我要拿到驾照,边写博客边做毕业设计,这几件事都不能误。
好了,早点休息,不能再熬夜了(最近就是因为熬夜到凌晨两三点才睡觉所以黑眼圈都好几圈了),晚安,好梦。
我也不知道什么原因,莫名我就喜欢黑绿。所以我又把之前做过的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之搜索框的更多相关文章
- ArcGIS API for javascript中搜索框的使用问题
我们在开发中常常需要用搜索框去搜索地图上的某个数据,然后在地图上显示出来.这个时候我们要用到esri.dijit.Search().在设置里面的sources的时候,需要注意一点:必须要使用在线的fe ...
- Ajax (Asynchronous javascript xml) 搜索框核心代码(JQuery) Ajax判断用户名存在核心代码 附:原生js的Ajax代码 其中有json的一句话解释
前端 <script type="text/javascript"> $(function(){ $("#tid").keyup(function( ...
- JavaScript实现模糊推荐的input框(类似百度搜索框)
如何用JS实现一个类似百度搜索框的输入框呢,再填充完失去焦点时,自动填充配置项,最终效果如下图: 实现很简单,但是易用性会上升一大截,需要用到的有jquery-ui的autocomplete,jque ...
- Javascript实例 -- 计时器, 搜索框,selected联动
计时器: <body> <input type="text" id="i1"> <input type="button& ...
- 原生JavaScript实战之搜索框筛选功能
成品图如下所示: 先搭建HTML结构: <div class="wrapper"> <div class="sWrapper"> < ...
- weui 搜索框
点击搜索,会显示关键字取消按钮,输入文字,会在搜索框下,有相应的列表显示. HTML: <!DOCTYPE html> <html> <head> <meta ...
- 用jsonp实现搜索框功能
用jsonp实现搜索框功能 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面 ...
- 淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
- jQuery+HTML5弹出创意搜索框层
效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...
随机推荐
- #cat ora11g_ora_.trc
Trace file /u02/app/diag/rdbms/ora11g/ora11g/trace/ora11g_ora_31212.trc Oracle Database 11g Enterpri ...
- mysql中sql注入的随笔
当使用如下登录代码时:就会引发sql注入问题 怎么注入呢? 'or 1=1 # 就可以了. 为什么呢? 首先or:在sql中是或者,只要满足前一个或后一个条件即可,只要所以不论你是 'or 1=1 # ...
- Windows中的DNS服务——正向解析&反向解析配置 分类: AD域 Windows服务 2015-07-16 20:21 19人阅读 评论(0) 收藏
坚信并为之坚持是一切希望的原因. DNS服务是AD域不可或缺的一部分,我们在部署AD域环境时已经搭建了DNS服务(windows server 2008 R2域中的DC部署),但是DNS服务的作用还是 ...
- Day27-28 基础加强
day28基础加强 今日内容 泛型 注解 Servlet3.0 动态代理 类加载器 泛型 回顾泛型类 泛型类:具有一个或多个泛型变量的类被称之为泛型类. public class A<T&g ...
- uchome 常用函数示例
一.inserttable //添加数据 //前3个参数 $tablename插入的表名称 $insertsqlarr数据数组 $returnid是否返回插入ID function inserttab ...
- mysql8新特性(一)
https://www.oschina.net/news/95325/mysql-8-0-ga-released http://blog.itpub.net/28218939/viewspace-21 ...
- hdu 5185 动态规划 分析降低复杂度
这题说的是 x[1]+x[2]+x[3]+…+x[n]=n, 这里 0 <= x[i] <= n && 1 <= i <= n x[i] <= x[i+1 ...
- jqGrid有关问题 小知识点
为每一行添加查看按钮 并且 调整行高 gridComplete:function(taskDatas){ //在此事件中循环为每一行添加修改和删除链接 $( ".autotip&quo ...
- MySQL从删库到跑路(二)——MySQL字符集与乱码解析
作者:天山老妖S 链接:http://blog.51cto.com/9291927 一.字符集与编码 1.字符集简介 字符(Character)是各种文字和符号的总称,包括各国家文字.标点符号.图形符 ...
- python 中使用ConfigParser类修改配置文件
配置文件的格式: [user] user_ip=127.0.0.1 user_name=testuser user_id=13 import ConfigParser conf = ConfigPar ...