WordPress 非常漂亮滴动态时间小工具

简介: 这是一段关于WordPress动态时间小工具的分享。作者提供了小工具的JavaScript代码和使用教程。用户需要将JS文件放入网站根目录,并在WP后台的自定义HTML小工具中添加指定代码以显示动态时间效果。教程包括了CSS和HTML部分,代码实现了一个时钟动画。

这个wordpress 动态时间小工具是在它人的网站瞅见地,我感觉挺漂亮的,然后就弄下来了!今天就送给大家吧!如果你能用得上就拿走吧!

教程也送给你们吧

  • 把js的文件直接放到你网站的根目录

(function(){var t=820;var a=250;var r=7;var n=10;var e=.65;var f;var o=[];const v=["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"];var h=[];var u=[[[0,0,1,1,1,0,0],[0,1,1,0,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,0,1,1,0],[0,0,1,1,1,0,0]],[[0,0,0,1,1,0,0],[0,1,1,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[1,1,1,1,1,1,1]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,0,0,1,1],[1,1,1,1,1,1,1]],[[1,1,1,1,1,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,1,1,1,0,0],[0,0,0,0,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,0,0,0,1,1,0],[0,0,0,1,1,1,0],[0,0,1,1,1,1,0],[0,1,1,0,1,1,0],[1,1,0,0,1,1,0],[1,1,1,1,1,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,1,1]],[[1,1,1,1,1,1,1],[1,1,0,0,0,0,0],[1,1,0,0,0,0,0],[1,1,1,1,1,1,0],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,0,0,0,1,1,0],[0,0,1,1,0,0,0],[0,1,1,0,0,0,0],[1,1,0,0,0,0,0],[1,1,0,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[1,1,1,1,1,1,1],[1,1,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,0,0,1,1,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0],[0,0,1,1,0,0,0]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,1,1,0]],[[0,1,1,1,1,1,0],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[1,1,0,0,0,1,1],[0,1,1,1,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,0,1,1],[0,0,0,0,1,1,0],[0,0,0,1,1,0,0],[0,1,1,0,0,0,0]],[[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0],[0,1,1,0],[0,1,1,0],[0,0,0,0],[0,0,0,0]]];function l(t){var a=[];f.fillStyle="#005EAC";var r=new Date;var e=70,o=30;var v=r.getHours();var u=Math.floor(v/10);var l=v%10;a.push({num:u});a.push({num:l});a.push({num:10});var c=r.getMinutes();var u=Math.floor(c/10);var l=c%10;a.push({num:u});a.push({num:l});a.push({num:10});var M=r.getSeconds();var u=Math.floor(M/10);var l=M%10;a.push({num:u});a.push({num:l});for(var p=0;p<a.length;p++){a[p].offsetX=e;e=m(e,o,a[p].num,t);if(p<a.length-1){if(a[p].num!=10&&a[p+1].num!=10){e+=n}}}if(h.length==0){h=a}else{for(var C=0;C<h.length;C++){if(h[C].num!=a[C].num){s(a[C]);h[C].num=a[C].num}}}i(t);g();return r}function s(t){var a=t.num;var n=u[a];for(var e=0;e<n.length;e++){for(var f=0;f<n[e].length;f++){if(n[e][f]==1){var h={offsetX:t.offsetX+r+r*2*f,offsetY:30+r+r*2*e,color:v[Math.floor(Math.random()*v.length)],g:1.5+Math.random(),vx:Math.pow(-1,Math.ceil(Math.random()*10))*4+Math.random(),vy:-5};o.push(h)}}}}function i(t){for(var a=0;a<o.length;a++){t.beginPath();t.fillStyle=o[a].color;t.arc(o[a].offsetX,o[a].offsetY,r,0,2*Math.PI);t.fill()}}function g(){var n=0;for(var f=0;f<o.length;f++){var v=o[f];v.offsetX+=v.vx;v.offsetY+=v.vy;v.vy+=v.g;if(v.offsetY>a-r){v.offsetY=a-r;v.vy=-v.vy*e}if(v.offsetX>r&&v.offsetX<t-r){o[n]=o[f];n++}}for(;n<o.length;n++){o.pop()}}function m(t,a,n,e){var f=u[n];for(var o=0;o<f.length;o++){for(var v=0;v<f[o].length;v++){if(f[o][v]==1){e.beginPath();e.arc(t+r+r*2*v,a+r+r*2*o,r,0,2*Math.PI);e.fill()}}}e.beginPath();t+=f[0].length*r*2;return t}var c=document.getElementById("canvas");c.width=t;c.height=a;f=c.getContext("2d");var M=new Date;setInterval(function(){f.clearRect(0,0,f.canvas.width,f.canvas.height);l(f)},50)})();

  • 再把下边的代码复制粘贴到wp后台 外观-小工具-自定义html文本中

<div class="card-content">

<canvas id="canvas" style="width:100%;" width="820" height="250"></canvas>

<script src="/clock.js"></script>

</div>

目录
相关文章
修改WordPress语言包po文件的方法和工具
转载自:http://clangcn.com/blog/archives/599.html 在改主题的时候遇到一个麻烦的问题.虽然官方有语言包对WordPress进行汉化,但是发现翻译的和我想要的不一样.于是就上网查了查.找到了一个好用的工具.我们知道语言包是两个文件:zh_CN.po和zh_CN.mo如果你想用文本编辑器来修改.po文件的话是没有作用的.修改.po的同时还必须修改.mo文件而.mo是没法编辑的.这时候就得用”po-edit”了.按下面的步骤做就可以改成你想要的翻译效果. 使用方法:1.当然是先下载po-edit这个软件.没软件你自己编啊,呵呵。
1121 0
|
Web App开发 安全 测试技术
WPForce——一款 Wordpress 漏洞利用工具
本文讲的是WPForce——一款 Wordpress 漏洞利用工具,在渗透测试过程中,我们可能会遇到运行WordPress的Web服务器。虽然Web服务器上的大多数WordPress服务器都配置了强大的密码和安全插件,但内部网络很少出现这种情况。
3720 0
|
PHP 容器 开发者
wordpress 如何移除管理后台仪表盘小工具
仪表盘的显示如下,如何禁用其中的仪表盘呢?   1.找到php文件: /wp-admin/includes/dashboard.php 2.在文件最后添加以下代码: // 创建一个动作钩子函数 function meetrice_remove_dashboard_widgets...
1233 0
|
PHP
<转>wordpress小工具制作前台后台全解析
wordpress主题制作中对边栏的处理一直是我们比较烦恼的,我们希望边栏的变化更多更复杂,今天我们就来具体讲解下wordpress边栏小工具的制作。 一、让你的主题显示小工具 有些相当简单的主题你会发现后台小工具功能竟然没有打开,边栏自然无法自己定义了。
1030 0
|
1月前
|
安全
SiteGround如何设置WordPress网站自动更新
iteGround Autoupdate功能会自动帮我们更新在他们这里托管的所有WordPress网站,这样做是为了保证网站安全,并且让它们一直保持最新状态。他们会根据我们选择的设置自动更新不同版本的WordPress,包括主要版本和次要版本。在每次自动更新之前,他们都会为我们的网站做一个完整的备份,这样如果有什么问题,我们可以轻松地恢复到之前的状态。在本文中,我们将介绍如何在SiteGround中设置WordPress网站自动更新。
52 0
SiteGround如何设置WordPress网站自动更新
|
1月前
WordPress网站更换域名后如何重新激活elementor
本文讲解WordPress网站更换域名后如何重新激活elementor。首先你需要在WordPress后台elementor下点击Disconnect断开原elementor连接,然后登录elementor官网,在后台解除原网站授权;接着在WordPress后台重新连接并激活elementor。
79 2
WordPress网站更换域名后如何重新激活elementor