等到下次需要用的时候，可以回来找模板用哈哈哈哈！
刚碰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>