253 lines
36 KiB
HTML
253 lines
36 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-cn">
|
||
|
||
<head>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||
<title>给你的博客加一个情侣恋爱倒计时小工具，另外安利一个好用的typecho插件</title>
|
||
<link rel="alternate" type="application/rss+xml" title="优世界" href="/rss.xml">
|
||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||
<link rel='stylesheet' href='/css/main.css'>
|
||
<link rel="stylesheet" href="/css/normalize.css">
|
||
<link rel="stylesheet" href="/css/remixicon.css">
|
||
<link rel="stylesheet" href="/css/uikit.min.css">
|
||
<link rel="stylesheet" href="/css/nprogress.min.css">
|
||
<link rel="stylesheet" href="/css/Artalk.css"/>
|
||
<script src="/js/jquery.min.js"></script>
|
||
<script src="/js/barrage.min.js"></script>
|
||
<script src="/js/jquery.scrollUp.min.js"></script>
|
||
<script src="/js/instantpage.min.js" type="module" defer></script>
|
||
<script src="/js/pjax.js"></script>
|
||
|
||
<link rel="stylesheet" href="/css/mywaline.css" />
|
||
|
||
<script>console.log("\n %c Amigo Theme %c https://usj.cc \n", "color: #fadfa3; background: #030307; padding:3px; font-size:12px;", "color: #ffffff;background: #16171a; padding: 3px; font-size: 12px;");</script>
|
||
<meta name="keywords" content="大学,教程,blog,优世界,优设计,博客,大学生博客,生活,文案," />
|
||
<meta name="template" content="Amigo" />
|
||
</head>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="main">
|
||
<div class="container">
|
||
<div class="header">
|
||
<div class="head_author_img load-memos-editor">
|
||
<img src="/image/avatar.jpg" class="blog-img" width="80" height="80" alt="优世界" />
|
||
</div>
|
||
<div class="site-description">
|
||
<h2><span class="uk-invisible">风吹云散，云卷云舒</span></h2>
|
||
<nav class="nav social uk-visible@m">
|
||
<ul class="flat">
|
||
|
||
|
||
<a href="https://pan.usj.cc" title="GitHub" target="_blank"><i class="ri-cloudy-2-line"></i></a>
|
||
|
||
<a href="https://space.bilibili.com/525472039" title="Twitter" target="_blank"><i class="ri-bilibili-line"></i></a>
|
||
|
||
<a href="https://github.com/imzql" title="LinkedIn" target="_blank"><i class="ri-github-fill"></i></a>
|
||
|
||
|
||
</ul>
|
||
<div class="yiyandes">风吹云散，云卷云舒</div>
|
||
</nav>
|
||
</div>
|
||
<nav class="nav">
|
||
<ul class="flat">
|
||
<li class="active"><a href="/">首页</a></li>
|
||
<li class="active"><a href="/about/">关于</a></li>
|
||
<li class="active"><a href="/ly/">留言</a></li>
|
||
<li class="active"><a href="/archives/">归档</a></li>
|
||
<li class="active"><a href="/links/">友链</a></li>
|
||
<li class="active"><a href="/circles/">友圈</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
|
||
|
||
<div id="pjax-container">
|
||
<article style="margin-bottom: 3.5em;">
|
||
<h1 class="post-title" itemprop="name headline">给你的博客加一个情侣恋爱倒计时小工具，另外安利一个好用的typecho插件</h1>
|
||
<div class="meta">
|
||
作者: 小赵同学 浏览: <span id="busuanzi_value_page_uv"></span> 字数: 1724 分类:
|
||
|
||
<a href="%e6%95%99%e7%a8%8b">教程</a>
|
||
|
||
</div>
|
||
<div class="post-content" itemprop="articleBody" uk-scrollspy="target: > hr,h2,p,pre; cls: uk-animation-slide-bottom-small; delay: 0">
|
||
<p>之前给大家说的那个博客后台美化，还有一点点问题，本来是承诺这个文章给他分享出来</p>
|
||
<p>因为第一次做美化，考虑到很多小伙伴还不会css，所以我自己测试好再放出来，哈哈哈，暂时鸽了</p>
|
||
<p>想必各位小伙伴，都是看我的文章标题进的，当然我不是标题党，本文章就是纯正经的整活</p>
|
||
<h2 id="paste-image插件">Paste Image插件</h2>
|
||
<p>作为一个生活类的写作博主，喜欢在文章掺杂一些自己的日常，意味着就需要上传图片</p>
|
||
<p>使用typecho的时候，上传图片要分为两步，十分的不方便，第一步上传附件，第二步插入图片</p>
|
||
<p>这样的步骤极大的拖慢了文章的写作效率，我前几天在github仓库发现一个插件可以完美解决这个痛点</p>
|
||
<p>这个插件可以为 Typecho 自带编辑器增加粘贴图片上传功能，Typecho 最新开发版已经直接支持粘贴上传功能</p>
|
||
<p>本插件仅供旧版本（我指的是现在使用的是官方最新<strong>正式版</strong>的小伙伴）</p>
|
||
<p>如果你是typecho的开发版本，请跳过这个地方，因为最新开发版已经完美支持这个功能了</p>
|
||
<p>想必很多小伙伴在typecho写博文的时候，喜欢插入图片，安装好了这个插件，写文章的时候</p>
|
||
<p>图片放在电脑桌面上，对图片选中之后，Ctrl+C 复制，然后去 typecho 编辑器去 ctrl+v，图片就直接上传好了</p>
|
||
<blockquote>
|
||
<p>插件地址：https://github.com/zgq354/PasteImage</p>
|
||
</blockquote>
|
||
<h2 id="为自己的博客添加一个恋爱小工具">为自己的博客添加一个恋爱小工具</h2>
|
||
<p>想必有很多博主，都是有着浪漫主义色彩，想必找过可以统计跟男朋友女朋友的相恋的时间</p>
|
||
<p>最近在学JavaScript，JavaScript一些课程也教我们做一些倒计时的小功能，我想这岂不是可以做个情侣恋爱计时</p>
|
||
<p>然后放在博客的侧栏，做成一个侧栏小卡片，说干就干，昨天下午就开始在网上找思路，效果基本上就是这样的</p>
|
||
<p>
|
||
<img data-lazy-src="/pics/2021/11/980812404.png" alt="23637-1p62hym2vgo.png" class="lazyload"></p>
|
||
<p>你如果想看样式，可以去我的测试站点</p>
|
||
<blockquote>
|
||
<p>北边博客：https://beibian.net</p>
|
||
</blockquote>
|
||
<p>这里我会提供两种方法，小赵推荐大家使用第二种，因为利于修改</p>
|
||
<p>找到博客的侧栏的php文件，在合适的位置加入以下代码</p>
|
||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span><span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">div</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"text-align: center;margin-top: 10px;"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">link</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"text/css"</span> <span style="color:#c4a000">media</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"all"</span> <span style="color:#c4a000">href</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"https://a-oss.zmki.cn/20190606/love.css"</span> <span style="color:#c4a000">rel</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"stylesheet"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&d=mm&r=g"</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-right: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">svg</span> <span style="color:#c4a000">viewBox</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"0 0 1024 1024"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"margin-left: 5px;margin-right: 5px;"</span> <span style="color:#c4a000">version</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"1.0"</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"15"</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"15"</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"my-face"</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">path</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#c4a000">d</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"M863.597631 513.574282l-271.33965-140.213484L729.783667 81.926656c3.583731-7.87141 7.167462-15.742819 7.167462-25.214109C736.887134 25.226908 708.345275 0.012799 672.635953 0.012799a63.611229 63.611229 0 0 0-39.293053 12.607055c-1.791866 1.59988-3.519736 3.19976-5.311602 3.19976L147.87531 418.925381a55.547834 55.547834 0 0 0-19.646527 47.356448c1.791866 17.278704 14.27093 33.021523 32.125591 42.492813l271.33965 141.749369L292.504463 945.221908c-12.479064 25.214109-1.791866 53.563983 23.166262 69.306802 10.751194 6.335525 23.230258 9.47129 35.709322 9.47129 16.062795 0 32.125591-4.735645 44.604655-15.742819l480.091993-403.297753a55.547834 55.547834 0 0 0 19.646526-47.228458 61.243407 61.243407 0 0 0-32.12559-44.156688z"</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#c4a000">fill</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"#515151"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">path</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">svg</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">img</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"https://cravatar.cn/avatar/08f9cdacb83a984411a94b60fddfbdcd?s=&d=mm&r=g"</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"width: 50px;height: 50px;vertical-align: -20px;border-radius: 50%;margin-left: 5px;margin-bottom: 5px;-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);box-shadow: 1px 1px 1px rgba(0,0,0,.1), 1px 1px 1px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);border: 2px solid #fff;"</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">br</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">id</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"htmer_time"</span><span style="color:#000;font-weight:bold">></span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"zmki_love_ah"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">div</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">script</span> <span style="color:#c4a000">type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"text/javascript"</span> <span style="color:#c4a000">language</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"javascript"</span><span style="color:#000;font-weight:bold">></span><span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">setTime</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">create_time</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">Math</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">round</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87;font-weight:bold">new</span> <span style="color:#204a87">Date</span><span style="color:#000;font-weight:bold">(</span><span style="color:#204a87">Date</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">UTC</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">2019</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">12</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">28</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">6</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">45</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">)).</span><span style="color:#000">getTime</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#ce5c00;font-weight:bold">/</span> <span style="color:#0000cf;font-weight:bold">1000</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">timestamp</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">Math</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">round</span><span style="color:#000;font-weight:bold">((</span><span style="color:#204a87;font-weight:bold">new</span> <span style="color:#204a87">Date</span><span style="color:#000;font-weight:bold">().</span><span style="color:#000">getTime</span><span style="color:#000;font-weight:bold">()</span> <span style="color:#ce5c00;font-weight:bold">+</span> <span style="color:#0000cf;font-weight:bold">8</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">60</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">60</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">1000</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#ce5c00;font-weight:bold">/</span> <span style="color:#0000cf;font-weight:bold">1000</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">currentTime</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">secondToDate</span><span style="color:#000;font-weight:bold">((</span><span style="color:#000">timestamp</span> <span style="color:#ce5c00;font-weight:bold">-</span> <span style="color:#000">create_time</span><span style="color:#000;font-weight:bold">));</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">currentTimeHtml</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#4e9a06">' <span class="zmki_love_ah">已经在一起</span><br>'</span> <span style="color:#ce5c00;font-weight:bold">+</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">currentTime</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">+</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">"年 "</span> <span style="color:#ce5c00;font-weight:bold">+</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">currentTime</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">1</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">+</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">" 天 "</span> <span style="color:#ce5c00;font-weight:bold">+</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">currentTime</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">2</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">+</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#4e9a06">" 时 "</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87">document</span><span style="color:#000;font-weight:bold">.</span><span style="color:#000">getElementById</span><span style="color:#000;font-weight:bold">(</span><span style="color:#4e9a06">"htmer_time"</span><span style="color:#000;font-weight:bold">).</span><span style="color:#000">innerHTML</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">currentTimeHtml</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">function</span> <span style="color:#000">secondToDate</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#ce5c00;font-weight:bold">!</span><span style="color:#000">second</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">return</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">var</span> <span style="color:#000">time</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87;font-weight:bold">new</span> <span style="color:#204a87">Array</span><span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">>=</span> <span style="color:#0000cf;font-weight:bold">365</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">24</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">time</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">/</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">365</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">24</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">));</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">%=</span> <span style="color:#0000cf;font-weight:bold">365</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">24</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">>=</span> <span style="color:#0000cf;font-weight:bold">24</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">time</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">1</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">/</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#0000cf;font-weight:bold">24</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">));</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">%=</span> <span style="color:#0000cf;font-weight:bold">24</span> <span style="color:#ce5c00;font-weight:bold">*</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">>=</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">time</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">2</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">/</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">%=</span> <span style="color:#0000cf;font-weight:bold">3600</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">>=</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">time</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">3</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#204a87">parseInt</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">/</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">%=</span> <span style="color:#0000cf;font-weight:bold">60</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">if</span> <span style="color:#000;font-weight:bold">(</span><span style="color:#000">second</span> <span style="color:#ce5c00;font-weight:bold">></span> <span style="color:#0000cf;font-weight:bold">0</span><span style="color:#000;font-weight:bold">)</span> <span style="color:#000;font-weight:bold">{</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">time</span><span style="color:#000;font-weight:bold">[</span><span style="color:#0000cf;font-weight:bold">4</span><span style="color:#000;font-weight:bold">]</span> <span style="color:#ce5c00;font-weight:bold">=</span> <span style="color:#000">second</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#204a87;font-weight:bold">return</span> <span style="color:#000">time</span><span style="color:#000;font-weight:bold">;</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold">}</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000">setInterval</span><span style="color:#000;font-weight:bold">(</span><span style="color:#000">setTime</span><span style="color:#000;font-weight:bold">,</span> <span style="color:#0000cf;font-weight:bold">1000</span><span style="color:#000;font-weight:bold">);</span>
|
||
</span></span><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">script</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span><span style="display:flex;"><span><span style="color:#000;font-weight:bold"></</span><span style="color:#204a87;font-weight:bold">body</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span></code></pre></div><p>然后就可以了，效果就是我上面展示的第一个效果图，这个方法不建议</p>
|
||
<p>主要是因为这个小工具的自带的css样式会，跟主题的css冲突，结果会像我这样的，哈哈哈</p>
|
||
<p>
|
||
<img data-lazy-src="/pics/2021/11/942065632.png" alt="53861-hatym7b1n84.png" class="lazyload"></p>
|
||
<p>这样直接离了大普，头部直接不听话</p>
|
||
<p>第二种方法就是利用iframe标签嵌套网页，这样新建一个网页再使用嵌套的方法将网站内容嵌套过来</p>
|
||
<p>不会影响自己的网站主题本身自带的主题样式，还利于修改，不至于自己不懂主题，一下把自己的主题删503了</p>
|
||
<p>第一步，把我的演示站，利用浏览器的审查元素功能，把整个代码存文本地的index.html</p>
|
||
<p>因为就是纯单页，JavaScript和css都放在这个页面。没有额外的文件，可以放心折腾</p>
|
||
<blockquote>
|
||
<p>演示页面：https://zql.im/love.html</p>
|
||
</blockquote>
|
||
<p>然后修改相应的东西改为你自己的就好了，然后找到主题的合适位置放入iframe标签</p>
|
||
<div class="highlight"><pre tabindex="0" style="background-color:#f8f8f8;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-html" data-lang="html"><span style="display:flex;"><span> <span style="color:#000;font-weight:bold"><</span><span style="color:#204a87;font-weight:bold">iframe</span> <span style="color:#c4a000">src</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"这里放置你的网页"</span> <span style="color:#c4a000">width</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"204"</span> <span style="color:#c4a000">height</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"120"</span> <span style="color:#c4a000">frameborder</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"0"</span> <span style="color:#c4a000">scrolling</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"No"</span> <span style="color:#c4a000">align</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"center"</span><span style="color:#000;font-weight:bold">><</span><span style="color:#204a87;font-weight:bold">span</span> <span style="color:#c4a000">data-mce-type</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"bookmark"</span> <span style="color:#c4a000">style</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"display: inline-block; width: 0px; overflow: hidden; line-height: 0;"</span> <span style="color:#c4a000">class</span><span style="color:#ce5c00;font-weight:bold">=</span><span style="color:#4e9a06">"mce_SELRES_start"</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">span</span><span style="color:#000;font-weight:bold">></</span><span style="color:#204a87;font-weight:bold">iframe</span><span style="color:#000;font-weight:bold">></span>
|
||
</span></span></code></pre></div><p>这里可能需要一点css基础，如果你不会，可以在文章的评论区留言，我有空可以帮你看看</p>
|
||
<h2 id="你为什么不在你的博客放这个小工具呢">你为什么不在你的博客放这个小工具呢</h2>
|
||
<p>这个嘛，前提是我得有个女朋友先，折腾来折腾去，才恍然大悟自己还是个单身汪，没想到小丑居然是我自己</p>
|
||
<p>过段时间会给大家分享倒计时的小卡片，JavaScript我还在学习中，争取给大家带来更多好玩的小功能</p>
|
||
<p>晚安，我的朋友们</p>
|
||
|
||
</div>
|
||
<div class="post-tags" style="margin-top: -30px;">
|
||
<nav class="nav tags">
|
||
<ul class="flat">
|
||
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</article>
|
||
<hr class="uk-divider-icon">
|
||
<div id="comments" class="comments-area">
|
||
|
||
|
||
|
||
<link href="/css/Artalk.css" rel="stylesheet" />
|
||
|
||
<div id="Comments" uk-scrollspy="target: div,span,img> ; cls: uk-animation-slide-bottom-small;"></div>
|
||
|
||
<script src="/js/Artalk.js"></script>
|
||
<script>
|
||
if (document.querySelector("#Comments")) {
|
||
Artalk.init({
|
||
el: '#Comments',
|
||
server: 'https://artalk.5b2.cn',
|
||
site: '优世界',
|
||
flatMode: true
|
||
})
|
||
}
|
||
</script>
|
||
|
||
|
||
</div>
|
||
<script async src="/js/bsz.js"></script>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="footer">
|
||
<nav class="nav" style="clear: both;">
|
||
© 2019 - 2024
|
||
<br>
|
||
<a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
|
||
<br>
|
||
本站由<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="blank" title="又拍云"
|
||
style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
|
||
<span style="color: var(--contentColor);font-weight: 700;">又拍云CDN</span>
|
||
</a>提供CDN加速服务
|
||
<br>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<script src="/js/iconfont.js"></script>
|
||
<script src="/js/lightgallery.umd.min.js"></script>
|
||
<script src="/js/uikit.min.js"></script>
|
||
<script src="/js/EasyLazyload.min.js"></script>
|
||
<script src="/js/view-image.min.js"></script>
|
||
<script src="/js/Artalk.js"></script>
|
||
<script src="/js/main.js"></script>
|
||
<script src="/js/mypjax.js"></script>
|
||
<script src="/js/nprogress.js"></script>
|
||
<script src="/js/echarts.min.js"></script>
|
||
<script src="/js/tiaozhuan.js"></script>
|
||
<script async src="/js/bsz.js"></script>
|
||
</body>
|
||
|
||
</html>
|
||
|