等到下次需要用的時候，可以回來找模板用哈哈哈哈！
剛碰jQuery，今天是個好日子，明天繼續學jQuery，明天也是個好日子，
目錄
- 周杰倫給你報時間
- 頁簽制作
- 什么是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://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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/195260.html
標籤：其他
上一篇：關于大多數人都不知道的SWITCH陳述句的用法（程式設計基礎課外拓展）
下一篇：用js實作放大鏡(利用背景圖)