當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間：2025/3/15 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了 js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

等到下次需要用的時候，可以回來找模板用哈哈哈哈！
剛碰jQuery，今天是個好日子，明天繼續(xù)學(xué)jQuery，明天也是個好日子。

https://blog.csdn.net/hanhanwanghaha一個超級無敵可愛的人鴨歡迎您的關(guān)注！
歡迎關(guān)注微信公眾號：寶藏女孩的成長日記
如有轉(zhuǎn)載，請注明出處（如不注明，盜者必究）

周杰倫給你報時間

發(fā)現(xiàn)了這張圖和顯示時間還有點相配，哈哈哈~
我倫：我是一個沒有感情的報時器哈哈哈哈哈哈哈哈哈哈~~

圖片鏈接：點擊這里
我尋思著怎么才能讓周杰倫看到我。。。
要是這篇文章能火就好了。。

<!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><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; /* 對應(yīng)上面的隱藏和清除浮動,這條語句是我點到誰誰就顯示 */}#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);">歡迎關(guān)注</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 設(shè)置為空document.getElementById("head"+num).className="current";// num為形參,傳進(jìn)來的時候就從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; /* 對應(yīng)上面的隱藏和清除浮動,這條語句是我點到誰誰就顯示 */}#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);">歡迎關(guān)注</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改變了數(shù)百萬人編寫JavaScript的方式。

接口文檔

jQuery API Document（jQuery）接口文檔

https://api.jquery.com/

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

jQuery初體驗

首先在js目錄下新建一個js文件

然后再編輯新的名字，選擇jquery，點擊創(chuàng)建就好啦

看第29行代碼，我們在執(zhí)行的時候需要引入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><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>

相比下面這樣的代碼，引入這樣的代碼更加便捷，因為我們直接調(diào)用就好啦

<!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>

期待與你的一起學(xué)習(xí)
https://blog.csdn.net/hanhanwanghaha
一個敲極無敵可愛的人歡迎你的關(guān)注。

不懂隨時留言，評論也可，私信也可，看見必回。Come on baby

總結(jié)

以上是生活随笔為你收集整理的js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：测试开发——flask视图函数与路由实
下一篇：你值得掌握的 Git分支等常用命令（