个人博客美化教程-小纸条

教程持续更新

1.添加访客问候语

（放在页面任意位置,建议body底部）

<script>
    var myImage = document.getElementById("my-image1");
    if (myImage) {
      $(function() {
        var time = (new Date).getHours();
        var minute = (new Date).getMinutes();
        var msg = ';
        if (time === 0 && minute >= 0 && minute <= 59) { // 0:00-0:59
          msg = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？";
        } else if (time === 1 && minute >= 0 && minute <= 59) { // 1:00-1:59
          msg = "午夜时分，您还没休息吗？";
        } else if (time >= 2 && time <= 4) { // 2:00-4:59
          msg = "深夜时分，注意保持身体健康哦~";
        } else if (time >= 5 && time <= 6) { // 5:00-6:59
          msg = "清晨好，早起的鸟儿有虫吃，新的一天开始啦~";
        } else if (time >= 7 && time <= 8) { // 7:00-8:59
          msg = "早上好！一日之计在于晨，美好的一天就要开始了！";
        } else if (time >= 9 && time <= 11) { // 9:00-11:59
          msg = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！";
        } else if (time >= 12 && time <= 12 && minute >= 0 && minute <= 59) { // 12:00-12:59
          msg = "午餐时间到啦！记得吃点营养的食物哦~";
        } else if (time >= 13 && time <= 13 && minute >= 0 && minute <= 59) { // 13:00-13:59
          msg = "午后的日子也很容易犯困呢~";
        } else if (time >= 14 && time <= 16) { // 14:00-16:59
          msg = "下午茶时间到了，喝杯茶放松一下吧！";
        } else if (time >= 17 && time <= 18) { // 17:00-18:59
          msg = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红~";
        } else if (time >= 19 && time <= 20) { // 19:00-20:59
          msg = "晚餐时间到啦！吃好晚饭，愉快度过美好夜晚~";
        } else if (time >= 21 && time <= 22) { // 21:00-22:00
          msg = "晚上好！今天过得怎么样呢？";
        }else if (time >= 23 && time <= 23) { // 22:00-23:59
          msg = "已经这么晚了呀，早点休息吧，晚安~";
        }
        Qmsg.success(msg);
      });
    }
</script>

2.给网站的评论加个打字特效

（放在页面任意位置,建议body底部）

<script>
    (function webpackUniversalModuleDefinition(a,b){if(typeof exports==="object"&&typeof module==="object"){module.exports=b()}else{if(typeof define==="function"&&define.amd){define([],b)}else{if(typeof exports==="object"){exports["POWERMODE"]=b()}else{a["POWERMODE"]=b()}}}})(this,function(){return(function(a){var b={};function c(e){if(b[e]){return b[e].exports}var d=b[e]={exports:{},id:e,loaded:false};a[e].call(d.exports,d,d.exports,c);d.loaded=true;return d.exports}c.m=a;c.c=b;c.p="";return c(0)})([function(c,g,b){var d=document.createElement("canvas");d.width=window.innerWidth;d.height=window.innerHeight;d.style.cssText="position:fixed;top:0;left:0;pointer-events:none;z-index:999999";window.addEventListener("resize",function(){d.width=window.innerWidth;d.height=window.innerHeight});document.body.appendChild(d);var a=d.getContext("2d");var n=[];var j=0;var k=120;var f=k;var p=false;o.shake=true;function l(r,q){return Math.random()*(q-r)+r}function m(r){if(o.colorful){var q=l(0,360);return"hsla("+l(q-10,q+10)+", 100%, "+l(50,80)+"%, "+1+")"}else{return window.getComputedStyle(r).color}}function e(){var t=document.activeElement;var v;if(t.tagName==="TEXTAREA"||(t.tagName==="INPUT"&&t.getAttribute("type")==="text")){var u=b(1)(t,t.selectionStart);v=t.getBoundingClientRect();return{x:u.left+v.left,y:u.top+v.top,color:m(t)}}var s=window.getSelection();if(s.rangeCount){var q=s.getRangeAt(0);var r=q.startContainer;if(r.nodeType===document.TEXT_NODE){r=r.parentNode}v=q.getBoundingClientRect();return{x:v.left,y:v.top,color:m(r)}}return{x:0,y:0,color:"transparent"}}function h(q,s,r){return{x:q,y:s,alpha:1,color:r,velocity:{x:-1+Math.random()*2,y:-3.5+Math.random()*2}}}function o(){var t=e();var s=5+Math.round(Math.random()*10);while(s--){n[j]=h(t.x,t.y,t.color);j=(j+1)%500}f=k;if(!p){requestAnimationFrame(i)}if(o.shake){var r=1+2*Math.random();var q=r*(Math.random()>0.5?-1:1);var u=r*(Math.random()>0.5?-1:1);document.body.style.marginLeft=q+"px";document.body.style.marginTop=u+"px";setTimeout(function(){document.body.style.marginLeft="";document.body.style.marginTop=""},75)}}o.colorful=false;function i(){if(f>0){requestAnimationFrame(i);f--;p=true}else{p=false}a.clearRect(0,0,d.width,d.height);for(var q=0;q<n.length;++q){var r=n[q];if(r.alpha<=0.1){continue}r.velocity.y+=0.075;r.x+=r.velocity.x;r.y+=r.velocity.y;r.alpha*=0.96;a.globalAlpha=r.alpha;a.fillStyle=r.color;a.fillRect(Math.round(r.x-1.5),Math.round(r.y-1.5),3,3)}}requestAnimationFrame(i);c.exports=o},function(b,a){(function(){var d=["direction","boxSizing","width","height","overflowX","overflowY","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","borderStyle","paddingTop","paddingRight","paddingBottom","paddingLeft","fontStyle","fontVariant","fontWeight","fontStretch","fontSize","fontSizeAdjust","lineHeight","fontFamily","textAlign","textTransform","textIndent","textDecoration","letterSpacing","wordSpacing","tabSize","MozTabSize"];var e=window.mozInnerScreenX!=null;function c(k,l,o){var h=o&&o.debug||false;if(h){var i=document.querySelector("#input-textarea-caret-position-mirror-div");if(i){i.parentNode.removeChild(i)}}var f=document.createElement("div");f.id="input-textarea-caret-position-mirror-div";document.body.appendChild(f);var g=f.style;var j=window.getComputedStyle?getComputedStyle(k):k.currentStyle;g.whiteSpace="pre-wrap";if(k.nodeName!=="INPUT"){g.wordWrap="break-word"}g.position="absolute";if(!h){g.visibility="hidden"}d.forEach(function(p){g[p]=j[p]});if(e){if(k.scrollHeight>parseInt(j.height)){g.overflowY="scroll"}}else{g.overflow="hidden"}f.textContent=k.value.substring(0,l);if(k.nodeName==="INPUT"){f.textContent=f.textContent.replace(/s/g,"u00a0")}var n=document.createElement("span");n.textContent=k.value.substring(l)||".";f.appendChild(n);var m={top:n.offsetTop+parseInt(j["borderTopWidth"]),left:n.offsetLeft+parseInt(j["borderLeftWidth"])};if(h){n.style.backgroundColor="#aaa"}else{document.body.removeChild(f)}return m}if(typeof b!="undefined"&&typeof b.exports!="undefined"){b.exports=c}else{window.getCaretCoordinates=c}}())}])});
    POWERMODE.colorful=true;POWERMODE.shake=false;document.body.addEventListener("input",POWERMODE);
</script>

3.强制对网址进行301重定向,可用于http强制转https等

    <!--重定向-->
    <script>
            location.replace(`https:${location.href.substring(location.protocol.length)}`);
    </script>

4.禁用网址右键和F12

注意如果不是joe主题的使用时需要把Qmsq改为其它弹窗提示

<script>
    	document.addEventListener("contextmenu", function(e) {
    		e.preventDefault();
    		Qmsg.success("你干嘛哎呦~")
    	});
    	document.addEventListener("keydown", function(e) {
    	if (e.key === "F12") {
    			e.preventDefault();
    			Qmsg.success("你干嘛哎呦~")
    		}
    	});
    </script>

5.添加一个加载特效

建议放在需要引入的head中

<style>#Loadanimation{background-color:var(--background);height:100%;width:100%;position:fixed;z-index:1;margin-top:0px;top:0px;}#Loadanimation-center{width:100%;height:100%;position:relative;}#Loadanimation-center-absolute{position:absolute;left:50%;top:50%;height:200px;width:200px;margin-top:-100px;margin-left:-100px;}.xccx_object{-moz-border-radius:50% 50% 50% 50%;-webkit-border-radius:50% 50% 50% 50%;border-radius:50% 50% 50% 50%;position:absolute;border-left:5px solid #87CEFA;border-right:5px solid #FFC0CB;border-top:5px solid transparent;border-bottom:5px solid transparent;-webkit-animation:animate 2.5s infinite;animation:animate 2.5s infinite;}#xccx_one{left:75px;top:75px;width:50px;height:50px;}#xccx_two{left:65px;top:65px;width:70px;height:70px;-webkit-animation-delay:0.1s;animation-delay:0.1s;}#xccx_three{left:55px;top:55px;width:90px;height:90px;-webkit-animation-delay:0.2s;animation-delay:0.2s;}#xccx_four{left:45px;top:45px;width:110px;height:110px;-webkit-animation-delay:0.3s;animation-delay:0.3s;}@-webkit-keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}@keyframes animate{50%{-ms-transform:rotate(180deg);-webkit-transform:rotate(180deg);transform:rotate(180deg);}100%{-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg);}}</style><div id="Loadanimation" style="z-index:99999999999999999999999999999999999999999999999"><div id="Loadanimation-center"><div id="Loadanimation-center-absolute"><div class="xccx_object" id="xccx_four"></div><div class="xccx_object" id="xccx_three"></div><div class="xccx_object" id="xccx_two"></div><div class="xccx_object" id="xccx_one"></div></div></div></div><script>document.body.style.overflow="hidden",document.onreadystatechange=(()=>{"interactive"===document.readyState&&setTimeout(()=>{document.body.style.overflow="visible",$("#Loadanimation").fadeOut(540)},500)});</script>

6.添加网站logo扫光

（注意这个是joe主题的示例,如果是其它博客的需要将.joe_header__above-logo替换为自己主题logo的组件名词）

    <style>
{position:relative;overflow:hidden;margin: 0px 0 0 0px;}.joe_header__above-logo:before{content:""; position: absolute; left: -665px; top: -460px; width: 200px; height: 15px; background-color: rgba(255,255,255,.5); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-animation: searchLights 6s ease-in 0s infinite; -o-animation: searchLights 6s ease-in 0s infinite; animation: searchLights 6s ease-in 0s infinite;}@-moz-keyframes searchLights{50%{left: -100px; top: 0;} 65%{left: 120px; top: 100px;}}@keyframes searchLights{40%{left: -100px; top: 0;} 60%{left: 120px; top: 100px;} 80%{left: -100px; top: 0px;}}
     </style>

7.添加网站点击特效

（将下方代码放在.js文件中,然后通过）下方示例引入到您的页面就好了

引用示例

<script src="你的.js文件路径"></script>

.js文件

"use strict";$(function(){function t(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}var i=Object.assign||function(t){for(var i=1;i<arguments.length;i++){var n=arguments[i];for(var e in n)Object.prototype.hasOwnProperty.call(n,e)&&(t[e]=n[e])}return t},n=function(){function t(t,i){for(var n=0;n<i.length;n++){var e=i[n];e.enumerable=e.enumerable||!1,e.configurable=!0,"value"in e&&(e.writable=!0),Object.defineProperty(t,e.key,e)}}return function(i,n,e){return n&&t(i.prototype,n),e&&t(i,e),i}}(),e=function(){function e(n){var o=n.origin,r=n.speed,s=n.color,a=n.angle,h=n.context;t(this,e),this.origin=o,this.position=i({},this.origin),this.color=s,this.speed=r,this.angle=a,this.context=h,this.renderCount=0}return n(e,[{key:"draw",value:function(){this.context.fillStyle=this.color,this.context.beginPath(),this.context.arc(this.position.x,this.position.y,2,0,2*Math.PI),this.context.fill()}},{key:"move",value:function(){this.position.x=Math.sin(this.angle)*this.speed+this.position.x,this.position.y=Math.cos(this.angle)*this.speed+this.position.y+.3*this.renderCount,this.renderCount++}}]),e}(),o=function(){function i(n){var e=n.origin,o=n.context,r=n.circleCount,s=void 0===r?10:r,a=n.area;t(this,i),this.origin=e,this.context=o,this.circleCount=s,this.area=a,this.stop=!1,this.circles=[]}return n(i,[{key:"randomArray",value:function(t){var i=t.length;return t[Math.floor(i*Math.random())]}},{key:"randomColor",value:function(){var t=["8","9","A","B","C","D","E","F"];return"#"+this.randomArray(t)+this.randomArray(t)+this.randomArray(t)+this.randomArray(t)+this.randomArray(t)+this.randomArray(t)}},{key:"randomRange",value:function(t,i){return(i-t)*Math.random()+t}},{key:"init",value:function(){for(var t=0;t<this.circleCount;t++){var i=new e({context:this.context,origin:this.origin,color:this.randomColor(),angle:this.randomRange(Math.PI-1,Math.PI+1),speed:this.randomRange(1,6)});this.circles.push(i)}}},{key:"move",value:function(){var t=this;this.circles.forEach(function(i,n){if(i.position.x>t.area.width||i.position.y>t.area.height)return t.circles.splice(n,1);i.move()}),0==this.circles.length&&(this.stop=!0)}},{key:"draw",value:function(){this.circles.forEach(function(t){return t.draw()})}}]),i}();(new(function(){function i(){t(this,i),this.computerCanvas=document.createElement("canvas"),this.renderCanvas=document.createElement("canvas"),this.computerContext=this.computerCanvas.getContext("2d"),this.renderContext=this.renderCanvas.getContext("2d"),this.globalWidth=window.innerWidth,this.globalHeight=window.innerHeight,this.booms=[],this.running=!1}return n(i,[{key:"handleMouseDown",value:function(t){var i=new o({origin:{x:t.clientX,y:t.clientY},context:this.computerContext,area:{width:this.globalWidth,height:this.globalHeight}});i.init(),this.booms.push(i),this.running||this.run()}},{key:"handlePageHide",value:function(){this.booms=[],this.running=!1}},{key:"init",value:function(){var t=this.renderCanvas.style;t.position="fixed",t.top=t.left=0,t.zIndex="999999999999999999999999999999999999999999",t.pointerEvents="none",t.width=this.renderCanvas.width=this.computerCanvas.width=this.globalWidth,t.height=this.renderCanvas.height=this.computerCanvas.height=this.globalHeight,document.body.append(this.renderCanvas),window.addEventListener("mousedown",this.handleMouseDown.bind(this)),window.addEventListener("pagehide",this.handlePageHide.bind(this))}},{key:"run",value:function(){var t=this;if(this.running=!0,0==this.booms.length)return this.running=!1;requestAnimationFrame(this.run.bind(this)),this.computerContext.clearRect(0,0,this.globalWidth,this.globalHeight),this.renderContext.clearRect(0,0,this.globalWidth,this.globalHeight),this.booms.forEach(function(i,n){if(i.stop)return t.booms.splice(n,1);i.move(),i.draw()}),this.renderContext.drawImage(this.computerCanvas,0,0,this.globalWidth,this.globalHeight)}}]),i}())).init()});

THE END

编程