網頁

2018年2月12日 星期一

CSS3+HTML5 的應用-阿旺師動態時鐘

原始程式碼下載:
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 瀏覽器右上方的 「這個網頁正在嘗試載入來源未經驗證的指令碼」圖示。


再按 「載入不安全的指令碼」,就可看到執行畫面。

當然,若你認為有資安問題,建議不要 按「載入不安全的指令碼」。自己下載原始程式,依照上面的方法修改,在自己的電腦上觀看即可。
執行畫面截圖:

沒有留言 :

張貼留言