您的位置：首页 > Web前端 > JavaScript

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

2019-01-21 11:34 483 查看

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航