js案例学习：搜索框效果

浏览数：41 / 时间：2015年06月09日

如图: 技术分享

<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>