jQuery/CSS3带数字时钟的圆盘时钟
修改內容:
利用記事本，打開 index.html
1.在 <style>內增加 一個 .name_info 其 css 的內容如下:
.name_info {width:160px;height:35px;letter-spacing:3px;font-size: 40px;
line-height:28px;text-align:center;position:absolute;top:90px;left:120px;z-index:11;
font: bold 40px/1 "標楷體", Helvetica, Arial, sans-serif;color: #ffff;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
}
2.在 <body>內增加 一個div其內容如下:
<div class="name_info" id="name_info"></div>
3.在 <script>內的 function setTime()增加 一列程式碼，其內容如下:
name_info.innerHTML="阿旺師";
並修改原始程式碼，把 原來的 day 改成 date。
date_info.innerHTML=year+"年"+month+"月"+date+"日 "+weekday[day];
4.刪除以下 敘述 :
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
說明:
本網頁會用到 jquery 的壓縮版本，語法如下:
<script src="js/jquery.min.js"></script>
<script>
內容完全是文字檔，沒有圖片。
執行結果:
看不到執行結果的原因:
因為本文章有 內嵌其它網站(學校伺服器)的網頁內容，「這個頁面所含的 HTTP 資源可能會在使用者透過 HTTPS 瀏覽網誌時造成混合內容，進而影響安全性與使用者體驗。」
，所以 Chrome 認為網頁程式碼有問題，所以封鎖。
本網頁程式碼，可看 index.html 和 js/jquery.min.js，內容沒有問題，所以可按 Chrome 瀏覽器右上方的 「這個網頁正在嘗試載入來源未經驗證的指令碼」圖示。
當然，若你認為有資安問題，建議不要 按「載入不安全的指令碼」。自己下載原始程式，依照上面的方法修改，在自己的電腦上觀看即可。
執行畫面截圖:
因為本文章有 內嵌其它網站(學校伺服器)的網頁內容，「這個頁面所含的 HTTP 資源可能會在使用者透過 HTTPS 瀏覽網誌時造成混合內容，進而影響安全性與使用者體驗。」
，所以 Chrome 認為網頁程式碼有問題，所以封鎖。
本網頁程式碼，可看 index.html 和 js/jquery.min.js，內容沒有問題，所以可按 Chrome 瀏覽器右上方的 「這個網頁正在嘗試載入來源未經驗證的指令碼」圖示。
再按 「載入不安全的指令碼」，就可看到執行畫面。
當然，若你認為有資安問題，建議不要 按「載入不安全的指令碼」。自己下載原始程式，依照上面的方法修改，在自己的電腦上觀看即可。
執行畫面截圖:
文字陰影 :CSS 文字陰影產生器
