JavaScript初学——制作一个简单的网页窗口并实现其功能（一）：菜单栏

本次制作只是简单的制作了界面，而未实现界面功能，具体界面如下：
在这里插入图片描述在这个界面中，主要给出的有：左上角的时间（按照系统时间跳动，而非静态）；右上角的“最小化”、“最大化”以及关闭界面的几个图标，具体代码如下：
css：

 body {
            background-color: bisque;
        }
        div#all {
            margin: auto;
            width: 1300px;
            height: 20px;
        }
        div#menu {
            background-color: darkgray;
            width: 1300px;
            height: 20px;
            color: white;
            margin: auto;
            /* 固定整个菜单栏 */
            position: fixed;
        }
        div#menu div {
            background-color: darkgray;
            height: 20px;
            float: left;
            /* 实现上下居中 */
            line-height: 15px;
        }
        div#small,div#max,div#close {
            width: 40px;
            text-align: center;
            font-weight: bold;
            font-size: x-large;
        }
        div#nothing {
            width: 1080px;
        }
        div#getTime {
            width: 100px;
            text-align: center;
        }

js（注：因为只是单纯的实现界面，因此并没有引入jQuery）：

// 定义一个显示时间的函数
        function startTime(){
            var today=new Date();
            var h=today.getHours();
            var m=today.getMinutes();
            var s=today.getSeconds();
            //如果数字小于10，则在数字前加一个“0”
            m=checkTime(m);
            s=checkTime(s);
            document.getElementById('getTime').innerHTML=h+":"+m+":"+s;
            //500毫秒后出现此函数方法
            t=setTimeout('startTime()',500);
        }
        function checkTime(i){
            if (i<10) {
                i="0"+i;
            }
            return i;
        }

body：

<body "startTime()">
    <div id="all">
        <div id="menu">
                <!-- 给网页的左上角加上一个时间功能 -->
                <div id="getTime" title="北京时间"></div>
                <div id="nothing"></div>
                <!-- 定义最小化窗口、最大化窗口、关闭浏览器的一个功能区 -->
                <div id="small" title="最小化窗口">-</div>
                <div id="max" title="最大化窗口">□</div>
                <div id="close" title="关闭窗口">×</div>
        </div>
        <!-- 创建一个空白div，防止内容被固定的div覆盖 -->
        <div style="width:1300px;height:20px;background:none;"></div>
    </div>
</body>

往下将会逐步将界面完善并且将功能完善。

JavaScript初学——制作一个简单的网页窗口并实现其功能（一）：菜单栏

猜你喜欢