js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验
生活随笔
收集整理的這篇文章主要介紹了
js实战代码系列—周杰伦给你报时间+网页页签制作模板+jQuery初体验
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
等到下次需要用的時候，可以回來找模板用哈哈哈哈！
剛碰jQuery，今天是個好日子，明天繼續學jQuery，明天也是個好日子。
https://blog.csdn.net/hanhanwanghaha一個超級無敵可愛的人鴨 歡迎您的關注！
歡迎關注微信公眾號：寶藏女孩的成長日記
如有轉載，請注明出處（如不注明，盜者必究）
目錄
- 周杰倫給你報時間
- 頁簽制作
- 什么是jQuery？
- 接口文檔
- 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 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再寫了一遍，比上面少了很多代碼
附加一個倒計時：
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">*{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初体验的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 测试开发——flask视图函数与路由 实
- 下一篇： 你值得掌握的 Git分支等 常用命令 （