等到下次需要用的时候，可以回来找模板用哈哈哈哈！
刚碰jQuery，今天是个好日子，明天继续学jQuery，明天也是个好日子。
周杰伦给你报时间
发现了这张图和显示时间还有点相配，哈哈哈~
我伦：我是一个没有感情的报时器哈哈哈哈哈哈哈哈哈哈~~
我寻思着怎么才能让周杰伦看到我。。。
要是这篇文章能火就好了。。
<!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>
附加一个倒计时：
https://blog.csdn.net/hanhanwanghaha/article/details/109265325
最后一个代码
什么是jQuery？
jQuery是一个快速，小型且功能丰富的JavaScript库。通过易于使用的API（可在多种浏览器中使用），它使HTML文档的遍历和操作，事件处理，动画和Ajax等事情变得更加简单。兼具多功能性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。
接口文档
jQuery API Document（jQuery）接口文档
中文版的：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