时间提示问候语、导航栏制作

综合性项目拓展：
一、根据时间提示问候语

代码显示：

<script>var t=new Date;var hour=t.getHours();if(8>hour>=5){alert("早上好!");}else if(hour<12){alert("上午好!");}else if(hour<18){alert("下午好!");}else if(hour<21){alert("晚上好!");}else if(hour<23){alert("祝你晚安!");}else if(hour>=23||hour<5){alert("网虫：该休息了，明天还有课呢！");}function timee(){var t=new Date;var d;var days = t.getDay();var week;switch(days) {case 1:week = '星期一';break;case 2:week = '星期二';break;case 3:week = '星期三';break;case 4:week = '星期四';break;case 5:week = '星期五';break;case 6:week = '星期六';break;case 0:week = '星期日';break;}d=t.getFullYear()+"-";d+=t.getMonth()+1+"-";d+=t.getDay()+6+" ";d+=t.getHours()+":";d+=t.getMinutes()+":";d+=t.getSeconds()+" ";d+=week;document.getElementById("n1").innerHTML="现在时间为:"+d;}var int=self.setInterval("timee()",1000);</script>

二、网站导航栏实现

<style>button{width:80px;height:25px;border:none;}#b1{background-image: url('1.png');}#b2{background-image: url('1.png');width:375px;height:25px;text-align: left;}#b1:hover{background-image: url('2.png');   }#b2:hover{background-image: url('2.png');   }</style><body><div style="width: 800px;margin:0px auto"><div><img src="1.jpg" width="100%" height="150px%"></div><div><button type="button" id="b1">网站首页</button><button type="button" id="b1">网站新闻</button><button type="button" id="b1">网站趣闻</button><button type="button" id="b1">网站论坛</button><button type="button" id="b1">网站介绍</button> <button type="button" id="b2">招纳贤士</button>   </div></div>
</body>

三、小米导航条

 <style>body {margin: 0;padding: 0;height: 2500px;font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif
}.topbar {background-color: #333;height: 35px;
}.container {/*块级元素居中*/margin: 0 auto;width: 1226px;
}.container::before .container::after {content: '';display: table;}.container::after {clear: both;
}.topbar a {text-decoration: none;color: #b0b0b0;font-size: 10px;
}.topbar a:hover {color: #ffffff;
}.topbar-nav {float: left;line-height: 40px;height: 35px;font-size: 0;margin-left: 50px;
}.topbar-nav span {font-size: 12px;color: #424242;font-family: sans-serif;margin: 0.5rem;}.topbar-info, .topbar-cart {float: right;
}.topbar-cart a {display: block;height: 35px;line-height: 35px;text-align: center;width: 120px;background-color: #424242;
}.topbar-cart a:hover {background-color: #ffffff;color: #ff6700;}.topbar-cart span {margin-left: -4px;font-size: 12px;
}.topbar-info{margin-right: 15px;
}.topbar-info a {float: left;text-decoration: none;height: 40px;line-height: 40px;padding: 0 5px;color: #b0b0b0;
}.topbar-info span {height: 40px;line-height: 40px;font-size: 12px;color: #424242;font-family: sans-serif;margin: 0.5rem;
}
.topbar-info a:hover {color: #ffffff;}
.topbar-info .sep {padding: 0 5px;
}
#app{position: absolute;left: 693px;display: none;
}
#gw{position: absolute;left: 1020px;border: 1px solid;display: none;
}</style>
</head>
<body>
<div class="topbar"><div class="container"><div class="topbar-nav"><a href="">小米商城<span>|</span></a><a href="">MIUI<span>|</span></a><a href="">loT<span>|</span></a><a href="">云服务<span>|</span></a><a href="">天星数科<span>|</span></a><a href="">有品<span>|</span></a><a href="">小爱开放平台<span>|</span></a><a href="">企业团购<span>|</span></a><a href="">资质证照 <span>|</span></a><a href="">协议规则<span>|</span></a><a href="" id="app1">下载app<span>|</span></a><a href="">智能生活<span>|</span></a><a href="">Select Location</a></div><div class="topbar-cart"><a href="" id="a2">购物车 <span>（0）</span></a></div></div>
</div>
<div><div class="topbar-info"><a href="">登录<span>|</span></a><a href="">注册<span>|</span></a><a href="" class="sep">消息通知</a></div>
</div>
<div id="app"><img src="app.PNG" alt="">
</div>
<div id="gw"><img src="gwc.PNG" alt="">
</div>
</body>

<script>var a1 =document.getElementById("app1");var app=document.getElementById("app");var timer=null;function open1(){clearTimeout(timer);app.style.display="block";}function close1(){timer=setTimeout(function(){app.style.display="none";},50);}a1.addEventListener('mouseover',open1);a1.addEventListener('mouseleave',close1);var a2 =document.getElementById("a2");var gw=document.getElementById("gw");var timer=null;function open2(){clearTimeout(timer);gw.style.display="block";}function close2(){timer=setTimeout(function(){gw.style.display="none";},50);}a2.addEventListener('mouseover',open2);a2.addEventListener('mouseleave',close2);</script>

时间提示问候语、导航栏制作相关推荐

03-Flutter移动电商实战-底部导航栏制作
03-Flutter移动电商实战-底部导航栏制作 1.cupertino_IOS风格介绍在Flutter里是有两种内置风格的: material风格: Material Design 是由 Goog ...
html页面间的跳转及导航栏制作
html页面间的跳转及导航栏制作 html页面间的跳转及导航栏制作技术:通过链接进行页面跳转,通过按钮进行页面跳转页面跳转演示: 通过链接进行页面跳转 html超链接另一个html页面的方法:在一个 ...
微信小程序导航栏制作
导航栏制作微信小程序不同于H5,制作导航栏不方便,尤其是对于一个初学者来看:以为微信小程序中的Js与H5中的差不多,其实不然,以下就是我在学习微信小程序中制作的小程序导航栏. 页面代码 <vi ...
html响应式导航栏制作,用Sass制作响应式导航栏(原创)
插件描述:用Sass制作响应式导航栏更新时间:2017/12/29 下午8:33:04 更新说明:细节优化data-stop='true' : 在手机版上禁止跳转页面// 插入js代码 $(docu ...
PHP全栈开发（八）：CSS Ⅹ 导航栏制作
学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...
关于网页导航栏制作的几种方法与常见问题解决（新人向）
无序列表是html页面排版经常用到的非常实用的标签,但是新手在使用无序列表时,经常会在横向排版上出现问题,笔者在这里提供了笔者在使用无序列表制作网页导航栏时的几种方法与常见问题的解决问题.(以css内 ...
html首页问候语,HTML5通过Javascript网页调用日期显示、根据时间判断问候语显示...
HTML5通过Javascript网页调用日期显示.根据时间判断出不同时间段的问候语并显示增加一段小小的问候语,就可以增加访客们对你网站的关照. 效果展示: 代码: 今天是: var day=&qu ...
前端练习项目——品优购 Day4 nav导航栏制作
1.整体结构分析整体是一个大盒子,大盒子里有一个版心,版心里有左右两个盒子.左盒子是全部商品,右盒子是相关选项.注意左盒子也是两个部分:1.全部商品分类标题 2.全部商品的具体分类 (这俩是一个 ...
HTML根据当前时间显示问候语,用原生JS写根据时间显示问候语
步骤构思 1)需要用到日期内置对象, 2)获取系统小时, 3)利用多分支语句来判断, 4)修改元素内容的相应显示问候语.

时间提示问候语、导航栏制作

时间提示问候语、导航栏制作相关推荐

最新文章

热门文章