等到下次需要用的时候，可以回来找模板用哈哈哈哈！
刚碰jQuery，今天是个好日子，明天继续学jQuery，明天也是个好日子。

https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）

周杰伦给你报时间

发现了这张图和显示时间还有点相配，哈哈哈~
我伦：我是一个没有感情的报时器哈哈哈哈哈哈哈哈哈哈~~

图片链接：点击这里
我寻思着怎么才能让周杰伦看到我。。。
要是这篇文章能火就好了。。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>周杰伦给你报时间</title><style type="text/css">*{margin: 0;padding: 0;}#box{height: 300px;width: 500px;background-image: url(../img/jay01.jpg);margin: 0 auto;/* position: absolute;left: 100px;top: 50px; */}#p1{width: 180px;height: 300px;position: relative;left: 0;top: 150px;color: #EEEEEE;}</style></head><body><!--目标：在网页中显示当前系统的时间今天是2020年10月27日  星期二 14:15:00--><div id="box"><p id="p1"></p></div><script type="text/javascript">function aa(){var now=new Date();var year=now.getFullYear();var month=now.getMonth()+1;var day=now.getDate();var week=now.getDay();var h=now.getHours();var m=now.getMinutes();var s=now.getSeconds();var xq=["日","一","二","三","四","五","六"];if(month<10){month="0"+month;}if(day<10){day="0"+day;}if(h<10){h="0"+h;}if(m<10){m="0"+m;}if(s<10){s="0"+s;}var str="今天是"+year+"年"+month+"月"+day+"日  星期"+xq[week]+" "+h+":"+m+":"+s+"";document.getElementById("p1").innerText=str;               }aa();setInterval(function(){aa();},1000);</script></body>
</html>

页签制作

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#tab{width: 600px;height: 300px;border: solid 1px #ccc;margin: 100px;overflow: hidden;   /* 超出的部分隐藏 */}#tab ul{height: 35px;list-style: none;}#tab ul li{height: 35px;width:199px;float: left;border-right: solid 1px #ccc;text-align: center;line-height: 35px;border-bottom: solid 1px #ccc;background: linear-gradient(to bottom,#fff,#ccc);}#tab ul li.current{background: linear-gradient(to bottom,#ccc,#fff);border-bottom: 0;}#tab div{display: none; /* 隐藏 */clear: both;    /* 清除浮动 */}#tab div.current{display: block; /* 对应上面的隐藏和清除浮动,这条语句是我点到谁谁就显示 */}#tab p{line-height: 33px;padding-left: 10px;border-bottom: dashed 1px #ccc;}a{color: #333;text-decoration: none;}</style></head><body><div id="tab"><ul><li class="current" id="head1" onmouseover="showitem(1);">欢迎关注</li><li id="head2" onmouseover="showitem(2);">我的主页</li><li id="head3" onmouseover="showitem(3);">技巧分享</li></ul><div class="current" id="c1"><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p></div><div id="c2"><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p></div><div id="c3"><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p></div></div><script type="text/javascript">function showitem(num){document.getElementById("head1").className="";document.getElementById("head2").className="";document.getElementById("head3").className="";// 先将head1 head2 head3 设置为空document.getElementById("head"+num).className="current";// num为形参,传进来的时候就从1开始,点到第一个li的时候就为head1,以此类推document.getElementById("c1").className="";document.getElementById("c2").className="";document.getElementById("c3").className="";document.getElementById("c"+num).className="current";}</script></body>
</html>

（此处是更新的）
我用jQuery再写了一遍，比上面少了很多代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#tab{width: 600px;height: 300px;border: solid 1px #ccc;margin: 100px;overflow: hidden;   /* 超出的部分隐藏 */}#tab ul{height: 35px;list-style: none;}#tab ul li{height: 35px;width:199px;float: left;border-right: solid 1px #ccc;text-align: center;line-height: 35px;border-bottom: solid 1px #ccc;background: linear-gradient(to bottom,#fff,#ccc);}#tab ul li.current{background: linear-gradient(to bottom,#ccc,#fff);border-bottom: 0;}#tab div{display: none; /* 隐藏 */clear: both;    /* 清除浮动 */}#tab div.current{display: block; /* 对应上面的隐藏和清除浮动,这条语句是我点到谁谁就显示 */}#tab p{line-height: 33px;padding-left: 10px;border-bottom: dashed 1px #ccc;}a{color: #333;text-decoration: none;}</style></head><body><div id="tab"><ul><li class="current" id="head1" onmouseover="showitem(1);">欢迎关注</li><li id="head2" onmouseover="showitem(2);">我的主页</li><li id="head3" onmouseover="showitem(3);">技巧分享</li></ul><div class="current" id="c1"><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha">敲可爱的憨憨王</a></p></div><div id="c2"><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p><p><a href="https://me.csdn.net/hanhanwanghaha">憨憨王的主页</a></p></div><div id="c3"><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p><p><a href="https://blog.csdn.net/hanhanwanghaha/article/details/108597306">分享一个英语技巧</a></p></div></div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("#tab li").mouseenter(function(){$(this).addClass("current").siblings().removeClass("current");var index = $("#tab li").index(this);$("#tab div").hide().eq(index).show();});</script></body>
</html>

附加一个倒计时：
https://blog.csdn.net/hanhanwanghaha/article/details/109265325
最后一个代码

什么是jQuery？

jQuery是一个快速，小型且功能丰富的JavaScript库。通过易于使用的API（可在多种浏览器中使用），它使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。

接口文档

jQuery API Document（jQuery）接口文档

https://api.jquery.com/

中文版的：https://jquery.cuishifeng.cn/

jQuery初体验

首先在js目录下新建一个js文件

然后再编辑新的名字，选择jquery，点击创建就好啦

看第29行代码，我们在执行的时候需要引入jquery库

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#aa{width: 1px;height: 20px;border: solid 1px palevioletred;background-color: pink;}</style></head><body><!-- 目标：做一个动画，由一个盒子宽度为1px的变为盒子为100px宽度使用jq的步骤：第一步：先引入jq这个库；第二步：在页面上编写html结构；第三步：编写jq代码--><div id="aa"></div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("#aa").animate({"width":"100px"},5000);</script></body>
</html>

相比下面这样的代码，引入这样的代码更加便捷，因为我们直接调用就好啦

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#box1{width: 700px;height: 30ox;border: solid 1px khaki;margin-top: 50px;margin-left: 10px;}#box2{width: 0px;height: 30px;background-color: red;}#box3{margin-left: 10px;color: black;}</style></head><body><div id="box1"><div id="box2"></div></div><span id="box3"></span><script type="text/javascript">var i=0;var timger1=setInterval(function(){i=i+10;document.getElementById("box2").style.width=i+"px";document.getElementById("box3").innerHTML=parseInt((i/700)*100)+"%";if(i>=700){clearInterval(timger1);}},100);</script></body>
</html>

期待与你的一起学习
https://blog.csdn.net/hanhanwanghaha
一个敲极无敌可爱的人欢迎你的关注。

不懂随时留言，评论也可，私信也可，看见必回。Come on baby

js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验相关推荐

js实战代码系列—带你玩jQuery带你飞
https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 目录 ...
mocha.js实战代码
let assert = require('assert');describe('Array', () => {describe('#indexOf', () => {it('should ...
七夕情侣浪漫表白html网页js特效代码七夕情人节表白示爱网站源码制作
❤ 精彩专栏推荐
js前面代码出错继续运行_Node.JS实战41：让命令行变的五颜六色
通常情况下,命令行文字都是黑底白色的: 想不想来点改变? 给文字换个颜色:给背景换个颜色. 先来看段代码: console.log('[31m Hello www.JShaman.com [0m'); ...
Vue.js 实战系列之实现视频类WebApp的项目开发——6. 首页视频详情实现
如果想看该实战系列的其他内容,请移步至 Vue.js 实战系列之实现视频类WebApp的项目开发. 项目仓库地址,欢迎 Star 实现效果功能实现视频详情页基本实现创建 InfoBar.vue ...
axios vue 动态date_Web前端Vue系列之-Vue.js 实战
课程简介: 课程目标:通过本课程的学习,让大家掌握Vue.js的进阶知识并在项目中应用. 适用人群:具有一定vue开发基础的开发人员. 课程概述:Vue (读音 /vjuː/,类似于 view) 是一 ...
使用Python代码获取网站反应时间的实战代码
大家好,我是爱编程的喵喵.双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中.从事机器学习以及相关的前后端开发工作.曾在阿里云.科大讯飞.CCF等比赛获得多次Top名次.现 ...
Node.js爬虫一站到底系列先导篇
前言: 在web编程课上,老师布置了爬虫任务,而没有任何经验和相关方面知识的小白简直一头雾水,不知道该如何下手.一开始抱着一本厚厚的犀牛书啃了好几天,本以为对Javascipt语法有一定了解后便可以自 ...
【WEB API项目实战干货系列】- API登录与身份验证(三)
上一篇: [WEB API项目实战干货系列]- 接口文档与在线测试(二) 这篇我们主要来介绍我们如何在API项目中完成API的登录及身份认证. 所以这篇会分为两部分, 登录API, API身份验证. ...

js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验

目录