JS学习案例

 admin  WEB  2020-01-31

1.利用焦点实现选择网站

document.getElementById(“1”).focus(); –>为a标签加了一个边框

<body onload="defau()">
    <a href="http://www.baidu.com/" id="1">百度</a>
    <a href="http://www.google.com.hk/" id="2">谷歌</a>
    <a href="http://www.youku.com/" id="3">优酷</a>
    <a href="http://www.tudou.com/" id="4">土豆</a>
    <input id="Button1" type="button" value="选择" onclick="showtable()" />
    <br />
    <input id="Button2" type="button" value="进入" onclick="openhref()" />
    <script type="text/javascript">
        var i = 1;
        var focusid;
        function defau() {
            document.getElementById('1').focus();
            focusid = 1;
        }
        function showtable() {
            var id = i + 1;
            document.getElementById(id).focus();
            focusid = id;0
            i++;
            if (i == 4) {
                i = 0;
            }
        }
        function openhref() {
            var href = document.getElementById(focusid).href;
            document.location = href;
        }
    </script>
</body>

2.鼠标悬停切换图片

重点： onmouseover(鼠标在移进) onmouseout(鼠标移出)

<body>
    <a href="#" onmouseover="over(this)" onmouseout="out(this)"><img src="../images/icon4.png" alt="" id="img"></a>
    <script>
        function over(obj)
        {
            document.getElementById("img").src="../images/location.png";
        }
        function out(obj)
        {
            document.getElementById("img").src="../images/icon4.png";
        }
    </script>
</body>

3.点击表单隐藏文字

    <style>
        input {
            width: 150px;
            height: 16px;
            color: #ccc;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <!-- 获取焦点和失去焦点事件 -->
    <input type="text" value="请输入..." id="inp">
    <button id="btn">查找</button>
    <script>
            var inp = document.getElementById("inp")
            inp.onfocus = function () {
                if (inp.value == "请输入...") {
                    inp.value = "";
                    inp.style.color = "#333";
                    inp.style.background="pink";
                }
            }
            inp.onblur = function () {
                if (inp.value == "") {
                    inp.value = "请输入...";
                    inp.style.color = "#ccc";
                    inp.style.background="#fff";
                }
            }
    </script>
</body>