js案例学习:搜索框效果

如图:

<html><head>    <title></title>    <!--<link href="css.css" type="text/css" rel="stylesheet"/>-->    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <!--<link rel="shortcut icon" href="../image/web1.ico" type="images/x-icon"/>-->    <!--<script  language="JavaScript" src="js1.js" ></script>-->    <script >        function inputBlur(key){            if(key.value.length<=0){                key.value=‘请重新输入关键词‘;                key.style.color=‘Gray‘;            }        }        function inputFocs(key){            if(key.value==‘输入搜索关键词‘){                key.value=‘‘;                key.style.color=‘Black‘;            }        }    </script></head><body><input onblur="inputBlur(this)" onfocus="inputFocus(this)"id="keyword" value="输入搜索关键字"        style="color: Gray"/><input type="button" value="搜索一下"/><input id="Text1"/><input id="Text2"/>

</body></html>

(网友提示):使用JavaScript的数学计算,看看你退休时每月工资是多少?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title></title>    <!--<link href="css.css" type="text/css" rel="stylesheet"/>-->    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <!--<link rel="shortcut icon" href="../image/web1.ico" type="images/x-icon"/>-->    <!--<script  language="JavaScript" src="js1.js" ></script>-->    <!--<script ></script>--></head><body><script>    ipay=2000;    company=20;    out=60;    count=out-company;    uppercent=.2    sumpay=0    document.write(‘你‘+company+‘岁参加工作,第一个月工资是‘+ipay+",每年你的工资涨"    +uppercent*100+‘%!</br>‘)    var i=0;    for(i;i<count;i++){        document.write("第"+i+"年每月你赚:" + Math.round(ipay) + "人民币<br />");        ipay*=(1+uppercent);        sumpay+=(ipay*12)    }    document.write("看好了!你快退休时每月赚多少钱:" + Math.round(ipay) + "人民币,你在这个神奇的公司总共赚了:"+ Math.round(sumpay) +"人民币<br />");</script></body></html>
时间: 2024-10-14 23:35:41

js案例学习:搜索框效果的相关文章

原生JS模拟百度搜索框

近期有个新入行的小伙伴一直在问一些基础知识,突然觉得人的记忆力有限,有些平常很少用到的知识点虽简单却也其实很容易模糊,或者是一个单词,或者是一个语法.所以想着应该利用一下工作之余的碎片时间,记录一些工作上的问题和一些有趣的小案例,于是开通了播客,一方面便于自己日后翻阅,一方面给刚学习的小伙伴一个参考. 今天先写一个简单的小案例:原生JS模拟百度搜索框. 需求: 1.当在输入框输入时,每输入一个文字,就会在下方展示相关内容列表 2.每一次输入框输入,清空上一次内容 3.鼠标移入列表内容时,对应的内

CSS3实现的苹果网站搜索框效果

在线演示 本地下载 用CSS3相关属性生成的动态搜索框效果.

JS遮罩层弹框效果

对于前端开发者来说,js是不可缺少的语言.现在我开始把我日常积累的一些js效果或者通过搜索自己总结的一些效果分享给大家,希望能够帮助大家一起进步,也希望大家能够多多支持! 1.今天我先分享一个遮罩层弹框效果: <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

js 百度云搜索框

// ==UserScript==// @name 百度云插件+APIKey// @namespace // @version 5.0.2.1// @description 在百度云网盘的页面添加一个搜索框,调用搜索API搜索所有公开分享文件// To add a search frame that calls some api for searching some public shared files in BaiduYun cloud netdisk. // @include /https

使用javascript ajax C#实现类似百度的搜索框效果

先看一下最终效果  样式不太好看,但是功能是完全可行的,在文本框中输入文字之后,会实现自动搜索的功能. 首先介绍一下原理: 文本框下方是一个div,里面是一个ul标签,初始状态此ul中不包含任何的li标签. 当文本框文字改变的时候,使用ajax把文本框内容取出来,传递到后台,在后台中从数据库查询数据并把结果返回到前台页面. 返回的结果格式设置为:A,B,C,D:以便在前台实现字符串分割. 前台页面把返回的字符串切分成数组,依次遍历并给ul添加li节点. 具体方法: ①前台布局就不多说了 ,重要的

Android搜索框效果

转载:http://blog.csdn.net/walker02/article/details/7917392 需求:项目中的有关搜索的地方,加上清空文字的功能,目的是为了增加用户体验,使用户删除文本更加快捷 解决过程:开始的时候感觉这个东西不太好实现,主要就是布局的问题,可能是开始顾虑的太多了,再加上当时产品催的不太紧,而且这个功能也不是必须实现的.但是今天不一样了,这个是老大让加上的,说别的很多应用中都有这个功能,没办法那就加上呗,试着去使用了相对布局去实现,把一个删除按键放在编辑框的右上

仿百度自动补全搜索框效果(*附有源码下载)

页面效果及代码,(源码在下面的下载链接) <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/semantic.css"> <script type="text/javascript" src="jquery-autocomplete/jquery

使用bootstrap的插件实现模态框效果方法步骤详解

本文和大家分享的主要是使用bootstrap 库的模态框插件 modal.js 来实现模态框效果相关内容,同时也使大家进一步熟悉 bootstrap 的插件使用,一起来看看吧,希望对大家学习bootstrap有所帮助. 一. bootstrap 的 js 插件的简单介绍 1.引入 我们在使用 bootstrap 库时,引入的文件 bootstrap.js 或者 bootstrap.min.js 就是 bootstrap的插件文件,这两种文件都集成了 bootstrap 的所有插件,区别在于 *.

用jsonp实现搜索框功能的实现

用jsonp实现搜索框功能的实现 前面的话: 在上周本来想发一篇模仿必应搜索的界面.但是在准备写文章之前突然想到前面学习了ajax技术,在这里我也让我的页面有一种不需要手动刷新就能获取到数据.但是发现用前面的方法并不能获取到我想要的效果.无奈前几天电脑换系统,把之前的源码丢了(前面有个不好的习惯就是把最近在做的东西放桌面).今天想彻底把这个问题搞明白. 用jquery和ajax进行初步的尝试: (本代码是参考慕课网,搜索框制作视频制作,有关具体详情请参考视频.自己之前的代码找不到了,之前最先的想