恋爱倒计时小工具

使用Javascript来计时⏲
给自己的网站任意位置添加上一个倒计时小工具，在丰富网站内容的同时又使网站显得很浪漫。

效果图

安装使用

这里提供2种安装方法，相关修改内容均已在文件中进行注释。

方法1

在网站合适的位置添加以下代码

<style>
/* 头像大小调整 */
.touxiang{
    width: 80px;     /* 头像宽度 */
    height: 80px;     /* 头像高度 */
    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;
}

</style>
<body>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/xiaoyanu/file-test@2021.11.24-2/more/lovetime.css" />
  <div style="text-align: center;">
      
    <!-- 头像1 -->
    <img class="touxiang" src="https://pic6.58cdn.com.cn/nowater/webim/big/n_v2e768a949c0c447669bdee501024703bb.jpg">
    
    <svg class="my-face" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="50" height="50"><path d="M866.944 256.768c-95.488-95.488-250.496-95.488-345.984 0l-13.312 13.312-9.472-9.472c-93.824-93.824-246.656-100.736-343.68-10.368-101.888 94.976-104.064 254.592-6.4 352.256l13.568 13.568 299.264 299.264c25.728 25.728 67.584 25.728 93.44 0l312.576-312.576c95.488-95.488 95.488-250.368 0-345.984zM335.36 352.64c-20.48 0-40.832 6.016-56.704 18.944a85.4912 85.4912 0 0 0-6.912 126.976c9.984 9.984 9.984 26.24 0 36.224l-3.2 3.2c-8.192 8.192-21.632 8.192-29.952 0-52.608-52.608-57.216-138.496-6.528-192.896 26.112-28.032 61.952-43.52 100.096-43.52 14.08 0 25.6 11.52 25.6 25.6v3.072c0 12.416-9.984 22.4-22.4 22.4z" p-id="21617" data-spm-anchor-id="a313x.7781069.0.i46" class="selected" fill="#FF2727"></path></svg>

    <!-- 头像2 -->
    <img class="touxiang" src="https://pic3.58cdn.com.cn/nowater/webim/big/n_v2b64c248279eb4437a9a27ee1e5205523.jpg"><br>
    
<span id="timejishiqi"></span>
  </div>
  <script>
    function timingTime(){
                // 开始时间 格式： 年-月-日 时:分:秒
                // 例如：2021-8-14 00：00：00
      let start = '2021-8-14 00:00:00'
      let startTime = new Date(start).getTime()
      let currentTime = new Date().getTime()
      let difference = currentTime - startTime
      let m =  Math.floor(difference / (1000))
      let mm = m % 60  // 秒
      let f = Math.floor(m / 60)
      let ff = f % 60 // 分钟
      let s = Math.floor(f/ 60) // 小时
      let ss = s % 24
      let day = Math.floor(s  / 24 ) // 天数
      return "已经在一起" + "<br> " + day + " 天 " + ss + " 小时 " + ff + " 分钟 " + mm +' 秒'
    }
    setInterval(()=>{
      document.getElementById('timejishiqi').innerHTML = timingTime()
    },1000)
  </script></body>

方法2

首先下载HTML文件，并上传到自己的服务器中。
已将所有文件集于一个HTML文件中，无需担心安装复杂。

使用iframe嵌套

<iframe src="恋爱倒计时网址" width="270" height="140" frameborder="0" scrolling="No" align="center"></iframe>
最后修改：2022 年 11 月 14 日
© 允许规范转载
如果觉得我的文章对你有用，请随意赞赏