分享一個顯示訪客ip歸屬地及電子時鐘+日歷的wordpress博客邊欄小工具

2018年8月10日來源:離情メ博客 3 2.2K人看過

給大家分享一個高大上的博客邊欄小工具,主要功能:集成訪客地區顯示到訪次數記錄、電子時鐘當前年月日英文顯示。先上效果圖吧。

CSS代碼

新建CSS文件并取名main.css代碼如下:

#hitimer_box{margin:0 0 1px;border:3px #ccc double;padding:.8em .5em;}
#hitimer_from,#hitimer_count{font-size:1.2em;font-weight:bold;margin:0 3px;}
#hitimer_clock,#hitimer_clock .datimer{width:100%;margin:0;padding:0;}
#hitimer_clock{background:#ccc;}
#hitimer_clock .datimer{margin:0;border:none;color:#000;font-size:12px;font-family:verdana;border-collapse:collapse;}
#hitimer_clock .datimer td{line-height:150%;text-align:center;border:1px rgba(255,255,255,.2) solid;padding:9px 0;}
#hitimer_clock .datimer td b{font-size:14px;}
#hitimer_clock td.toptime{font-size:32px;padding:4px 0;}
#hitimer_clock .ampm{font-size:14px}

js代碼

第二步,新建JS文件并取名main.js代碼如下:

/*
For: 問候和電子鐘[ZBLOG-PHP插件]
Author: 爾今
Author Email: [email protected]
Author URL: http://www.yiwuku.com/
*/

document.writeln('<div id="hitimer_box">歡迎<span id="hitimer_from">外星球</span>的朋友,這是您第<span id="hitimer_count">N</span>次到訪本站。</div><div id="hitimer_clock"></div>');
//COUNT
var ht_caution = false;
function ht_setCookie(name, value, expires, path, domain, secure) {
    var curCookie = name + "=" + escape(value) + ((expires) ? "; expires=" + expires.toGMTString() : "") + ((path) ? "; path=" + path : "") + ((domain) ? "; domain=" + domain : "") + ((secure) ? "; secure" : "")
    if (!ht_caution || (name + "=" + escape(value)).length <= 4000) document.cookie = curCookie;
    else if (confirm("Cookie exceeds 4KB and will be cut!")) document.cookie = curCookie;
}
function ht_getCookie(name) {
    var prefix = name + "=";
    var cookieStartIndex = document.cookie.indexOf(prefix);
    if (cookieStartIndex == -1) return null;
    var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);
    if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length;
    return (document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));
}
function ht_fixDate(date) {
    var base = new Date(0);
    var skew = base.getTime();
    if (skew > 0) date.setTime(date.getTime() - skew);
}
(function(){
	var now = new Date();
	ht_fixDate(now);
	now.setTime(now.getTime() + 365 * 24 * 60 * 60 * 1000);
	var visits = ht_getCookie("ht_counter");
	if (!visits) visits = 1;
	else visits = parseInt(visits) + 1;
	ht_setCookie("ht_counter", visits, now, "/");
	document.getElementById("hitimer_count").innerText=visits;
    document.getElementById("hitimer_box").style.borderColor=htmcolor;
    document.getElementById("hitimer_clock").style.background=htmcolor;
})();
//TIME
function ht_time(){
    var today = new Date();
    var hrs = today.getHours();
    var min = today.getMinutes();
    var secs = today.getSeconds();
    var alsohrs = today.getHours();
    var dayNumber = today.getDate();
    var year = today.getFullYear();
    var ampm="", zero="0";
    var month = today.getMonth();
    var weekday = today.getDay();
    var wdn = ["SUN","MON","TUE","WED","THU","FRI","SAT"];
    var mn = ["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"];
    if (min<10) min=zero+min;
    if (secs<10) secs=zero+secs;
    if (hrs>12) hrs=eval(hrs - 12);
    if (hrs>=0 && hrs<1) hrs=12;
    if (alsohrs>=12 && alsohrs<24){
        ampm="P.M.";
    }else{
        ampm="A.M.";
    }
    tmp='<table class="datimer"><tr><td class="toptime" colspan="4">';
    tmp+=hrs+'<span id="blinker">:</span>'+min;
    tmp+='<span class="ampm"> '+ampm+'</span>';
    tmp+='<tr><td>Month<br><b>'+mn[month]+'</b></td>';
    tmp+='<td>Date<br><b>'+dayNumber+'</b></td>';
    tmp+='<td>Day<br><b>'+wdn[weekday]+'</b></td>';
    tmp+='<td>Year<br><b>'+year+'</b></td></tr></table>';
    document.getElementById("hitimer_clock").innerHTML=tmp;
    clocktime=setTimeout("ht_time()","1000");
}
function ht_blink(){
    var obj = document.getElementById("blinker");
    if (obj.style.visibility == "visible"){
            obj.style.visibility="hidden";
    }else{
        obj.style.visibility="visible";
    }
    eachsecond=setTimeout("ht_blink()","500");
}
ht_time();
ht_blink();
//AREA
var htprot = location.protocol;
var ht_jsload={head:document.getElementsByTagName("body")[0]||document.documentElement,Myload:function(B,A){this.done=false;B.onload=B.onreadystatechange=function(){if(!this.done&&(!this.readyState||this.readyState==="loaded"||this.readyState==="complete")){this.done=true;A();B.onload=B.onreadystatechange=null;if(this.head&&B.parentNode){this.head.removeChild(B)}}}},getScript:function(A,C){var B=function(){};if(C!=undefined){B=C}var D=document.createElement("script");D.setAttribute("type","text/javascript");D.setAttribute("src",A);this.head.appendChild(D);this.Myload(D,B)}}
try {
    ht_jsload.getScript(htprot+'//ip.ws.126.net/ipquery', function () {
        var htcity = "", htprovince = "";
        if(typeof(lo) != "undefined"){
            htprovince = lo;
        }
        if(typeof(lc) != "undefined"){
            htcity = lc;
        }
        if(htcity==htprovince) htprovince="";
        document.getElementById("hitimer_from").innerText=htprovince+htcity;
    });
} catch (e) {}
//若無十足把握,切勿修改以上代碼,容易出錯,有疑問請聯系

調用

第三步,將調用代碼放在你希望顯示的地方,可以CSS代碼為你喜歡的樣式。

<div>我是標題<script type="text/javascript">document.writeln(unescape("%3Cscript src=\"<?php bloginfo('template_directory'); ?>/main.js\" type=\"text/javascript\"%3E%3C/script%3E"));</script></div>

 

weinxin
加入王卡吉他社
微信掃描左側二維碼,加入淘小鋪掌柜團,免費協助您開通掌柜資格...
  • 版權聲明 本文源自 離情メ博客, 整理發表于2018年8月10日
  • 除非特殊聲明,本站文章均為原創,轉載請務必保留本文鏈接
WordPress多站點發布文章同步 建站

WordPress多站點發布文章同步

思路:在另一個 WordPress 站點創建一個API,文章發布時用cURL模擬 POST 請求 API 利用wp_insert_post()函數來創建文章。支持同步文章標題、內容、類型、分類、標簽,...
WordPress如何批量刪除特色圖片 建站

WordPress如何批量刪除特色圖片

如何批量刪除特色圖片,實現方法很簡單,但是需要編輯主題根目錄下的 functions.php 這個敏感的文件,將下面的代碼添加? functions.php 文件中: global $wpd...
匿名

發表評論

匿名網友 填寫信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

評論:3   其中:訪客  2   博主  1
    • avatar 很萌 @回復 1

      不錯的樣式,標記一下

      • avatar 天賦網 @回復 0

        博主怎么不搞一個,好看看效果怎么樣