<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> body { background:#3a6ea5; margin:0; padding:0; font-size:12px; font-family:宋体; } ul, li, dl, dt, dd { margin:0; padding:0; } ul { list-style:none; } #start { position:absolute; width:100%; height:30px; background:#d4d0c8; } #bar { margin-top:1px; border-top:1px solid #fff; padding:3px; } /*StartMenu*/ #bar #startMenu { position:absolute; display:none; width:200px; background:#d4d0c8; left:3px; bottom:25px; border-top:1px solid #404040; border-right:1px solid #404040; border-bottom:1px solid #808080; border-left:1px solid #808080; } #bar #startMenu ul { padding:5px; border-top:1px solid #fff; border-right:1px solid #fff; } #bar #startMenu ul li { padding:5px 0; line-height:28px; cursor:default; } #bar #startMenu ul li.active { background:#0a246a; color:#fff; } #bar #startMenu ul li dl { display:inline; } #bar #startMenu ul li dl dt { float:left; clear:left; width:28px; margin:0 5px; } #bar #startMenu ul li dl dd { margin-left:40px; } /*StartBtn*/ #bar .button { float:left; } #bar #startBtn { width:47px; height:22px; border:none; } #bar .startBtn { background:url(images/start.gif); } #bar .startBtnOver { background:url(images/start_hover.gif); } /*Time*/ #bar #timer { float:right; width:185px; border-top:1px solid #808080; border-left:1px solid #808080; border-right:1px solid #fff; border-bottom:1px solid #fff; line-height:22px; padding:0 6px; } </style> <script type="text/javascript"> function showStart() { // 自动调整任务栏的位置 var start = document.getElementById("start"); var startHeight = 30; var clientHeight = document.documentElement.clientHeight; //可见部分高度 var scrollTop = document.documentElement.scrollTop; //滚动条滚动高度 start.style.top = clientHeight + scrollTop - startHeight + "px"; } function toggleStart() { // 改变开始按钮的状态：按下还是松开鼠标 var startBtn = document.getElementById("startBtn"); var currentClass = startBtn.className; if(currentClass == "startBtn") { ShowMenu(); startBtn.className = "startBtnOver"; } else { HideMenu(); startBtn.className = "startBtn"; } } function SetActive(obj) { // 设置菜单中当前项激活状态 obj.className = "active"; } function SetDeActive(obj) { // 设置菜单中当前项非激活状态 obj.className = ""; } function ShowMenu() { // 显示开始菜单 document.getElementById("startMenu").style.display = "block"; } function HideMenu() { // 隐藏开始菜单 document.getElementById("startMenu").style.display = "none"; document.getElementById("startBtn").className = "startBtn"; } //当前时间 显示 function showTime() { var now = new Date(); var year = now.getFullYear(); var month = now.getMonth() + 1; var day = now.getDate(); var week = now.getDay(); var weekName = "星期"; switch(week) { case 0: weekName += "日"; break; case 1: weekName += "一"; break; case 2: weekName += "二"; break; case 3: weekName += "三"; break; case 4: weekName += "四"; break; case 5: weekName += "五"; break; case 6: weekName += "六"; break; } var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); document.getElementById("timer").innerHTML = year +"年"+ month +"月"+ day +"日 " + weekName + " " + hour + ":" + minute +":"+ second; } window.onload = function() { // 显示任务栏 showStart(); // 显示当前时间 var timer = window.setInterval("showTime()", 1000); }; // 窗口尺寸发生变化时，自动调整任务栏的位置，保持在最底端 window.onresize = showStart; </script> </head>
<body> <div id="start"> <div id="bar"> <div id="startMenu"> <ul> <li onmouseover="SetActive(this)" onmouseout="SetDeActive(this)" onclick="HideMenu()"> <dl> <dt><img src="data:images/icon_outlook.gif" /></dt> <dd>Microsoft Office Outlook</dd> </dl> </li> <li onmouseover="SetActive(this)" onmouseout="SetDeActive(this)" onclick="HideMenu()"> <dl> <dt><img src="data:images/icon_excel.gif" /></dt> <dd>Microsoft Office Excel</dd> </dl> </li> </ul> </div> <div class="button"> <input id="startBtn" class="startBtn" type="button" name="start" onclick="toggleStart()" /> </div> <div id="timer"> Windows Time Starting... </div> </div> </div> </body> </html>