HTML CSS JavaScript实战-优快云博客

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <style type="text/css">
        li {
            width: 100px;
            color:white;
        }
        body {
        background-color:black;
        }
        #timeDiv {
            width: 600px;
            height: 400px;
            /*border: 1px solid red;*/
            margin: 0 auto;
        }
        input {
        width:200px;
        }
        .txtColor {
        color:gray;
        }
        .txtColor2 {
        color:black;
        }
    </style>
    <ul>
        <li>周一</li>
        <li>周二</li>
        <li>周三</li>
        <li>周四</li>
        <li>周五</li>
    </ul>
    <div id="timeDiv">
        <h1></h1>
        <input />
    </div>
    <script type="text/javascript">
        window.onload = function () {
            //获取页面上的所有li标签
            var liObjs = document.getElementsByTagName('li');
            //循环遍历所有li标签注册事件
            for (var i = 0; i < liObjs.length; i++) {
                //注册鼠标悬浮事件
                liObjs[i].onmouseover = function () {
                    for (var j = 0; j < liObjs.length; j++) {
                        if (liObjs[j] == this) {
                            //当循环到出发时间的元素的时候改变其字体颜色为红色
                            this.style.color = 'red';
                        }
                        else {
                            //其他元素字体颜色为白色
                            liObjs[j].style.color = 'white';
                        }
                    }
                };
                //注册鼠标点击事件
                liObjs[i].onclick = function () {
                    for (var j = 0; j < liObjs.length; j++) {
                        if (liObjs[j] == this) {
                            //当循环到触发事件的元素的时候字体变大
                            this.style.fontSize = 'xx-large';
                        }
                        else {
                            //其他元素恢复原来的字体大小
                            liObjs[j].style.fontSize = '';
                        }
                    }
                };
            }
            //创建一个计时器，间隔为1秒
            window.setInterval(function () {
                //实例化一个时间对象
                var date = new Date();
                //得到小时
                var hour = date.getHours();
                //得到分钟
                var min = date.getMinutes();
                //得到秒数
                var sec = date.getSeconds();
                //得到显示时间的元素对象，将颜色设置为白色，设置包含文字
                var h1Obj = document.getElementsByTagName('h1');
                h1Obj[0].style.color = 'white';
                h1Obj[0].innerText = '北京时间：' + hour + '时' + min + '分' + sec+'秒';
            }, 1000);
            //得到页面的文本框
            var txtObj = document.getElementsByTagName('input');
            txtObj[0].value = '请输入搜索关键字';
            txtObj[0].className = 'txtColor';
            //注册获得焦点事件
            txtObj[0].onfocus = function () {
                //判断字体颜色，如果是灰色则设置为空
                if (txtObj[0].className == 'txtColor') {
                    txtObj[0].value = '';
                }
            };
            //注册失去焦点的事件
            txtObj[0].onblur = function () {
                //判断是否为空，如果为空则重新赋值，并设置灰色
                if (txtObj[0].value == '') {
                    txtObj[0].value = '请输入搜索关键字';
                    txtObj[0].className = 'txtColor';
                }
                else {
                    //不为空则设置颜色为黑色
                    txtObj[0].className = 'txtColor2';
                }
            };
        };
    </script>
</body>
</html>