首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >给网站侧边栏添加恋爱计时器

给网站侧边栏添加恋爱计时器

作者头像
小胡同学
修改于 2023-02-05 03:33:36
修改于 2023-02-05 03:33:36
41700
代码可运行
举报
运行总次数:0
代码可运行

如图:

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<div class="joe_aside__item hot" style="text-align: center; color:#888; font-size: 15px; padding:10px;">
    <div style="width: 220px; margin: 0 auto;">
        <!-- 左边的头像,nk=后面填写QQ号,直接采集QQ头像 -->
        <img src="https://q1.qlogo.cn/g?b=qq&nk=2509659437&s=640" alt="love"
            style="width: 60px; border-radius: 50%;">
        <!-- 中间的图片 -->
        <img src="http://pic.ygmgo.cn/view.php/0b9b3a8c704051bea4f2a46b3689a906.gif" alt="love"
            style="width: 60px; border-radius: 50%;">
        <!-- 右边的头像,nk=后面填写QQ号,直接采集QQ头像 -->
        <img src="https://q1.qlogo.cn/g?b=qq&nk=647249809&s=640" alt="love"
            style="width: 60px; border-radius: 50%;">
    </div>
    <p id="lovepyqSitetime"></p>
    <script language=javascript>
        function lovepyqSitetime() {
            window.setTimeout("lovepyqSitetime()", 1000);
            var seconds = 1000
            var minutes = seconds * 60
            var hours = minutes * 60
            var days = hours * 24
            var years = days * 365
            var today = new Date()
            var todayYear = today.getFullYear()
            var todayMonth = today.getMonth() + 1
            var todayDate = today.getDate()
            var todayHour = today.getHours()
            var todayMinute = today.getMinutes()
            var todaySecond = today.getSeconds()
            // 时间设置
            var t1 = Date.UTC(2023, 01, 01, 22, 22, 00)   //年,月,日,时,分,秒
            var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond)
            var diff = t2 - t1
            var diffYears = Math.floor(diff / years)
            var diffDays = Math.floor((diff / days) - diffYears * 365)
            var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours)
            var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes)
            var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                diffMinutes * minutes) / seconds)
            document.getElementById("lovepyqSitetime").innerHTML = "我们相恋了:</br>" + diffYears + "年" + diffDays + "天" +
                diffHours + "时" + diffMinutes + "分" + diffSeconds + "秒啦"
        }
        lovepyqSitetime()
    </script>
</div>

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Typecho添加恋爱计时小组件-星泽V社
1.一个可以让你网站侧栏不在那么孤单的代码.可以加入你那 可爱 ,漂亮的女朋友表情还有 屌丝 的你 2.支持修改代码中的qq号即可更改头像图片,自定义恋爱计时 3.孤零零的我也只能静静的把好东西分享跟你们了!
星泽V社
2022/03/30
6130
Typecho添加恋爱计时小组件-星泽V社
添加恋爱计时小组件
前言 一个可以让你网站侧栏不在那么孤单的代码,自定义恋爱计时 实现效果 代码 <!-- 恋爱计时 --> <ul class="header_slideout-count"> <div id="lovesyl" style="width: 100%; height: 100%; text-align: center; font-size: 1rem;"> <div id="lovesylImage" style="width: 220px; margin: 0 auto;">
777nx
2023/05/02
3590
添加恋爱计时小组件
网站自定义运行时间和当前时间和天气代码
代码如下,附在网页代码即可。文字可适当修改,自测。 <script language=javascript> function siteTime(){ window.setTimeout("siteTime()", 1000); var seconds = 1000 var minutes = seconds * 60 var hours = minutes * 60
Lcry
2022/11/29
7840
网站自定义运行时间和当前时间和天气代码
子比主题添加微语页面
在日常生活中,我们常常在自己博客网站发表自己的一些文章,但我们当想发表一句简短的话语时,用文章发布的话就显得大材小用了,这时我们就需要一个可以发表一句话的功能页面,微语页面在这时候就起到了一个很好的作用。微语页面简单地说就像我们微信的朋友圈那样,简单实用。很适合发一些说说、一句话的感言等。
九笙
2025/07/14
460
JavaScript实现网站运行时间
看到很多的博客站点上都是有网站运行时间统计的代码,之前有学过JS语言,之后上网上借鉴了一下网上大佬写的代码。就是一个简单的运行时间的减法运算,才用了JS的事件函数,获取当前时间等等操作,最后给大家看一下代码及效果图片吧!
Meng小羽
2019/12/23
1.2K3
Typecho左右侧广告区域展示恋爱线时间
该教程适用typecho动态博客框架,handsome主题,展示恋爱线时间,效果立于博客网页左侧右侧等区域,展示如下:
AomanHao
2022/01/14
7500
Typecho左右侧广告区域展示恋爱线时间
js 添加网站运行时间
<span id="sitetime"></span>  //js 调用 <script>     function siteTime(){         window.setTimeout("siteTime()", 1000);         var seconds = 1000;         var minutes = seconds * 60;         var hours = minutes * 60;         var days = hours * 24;         v
Savalone
2020/03/13
2K0
网站运行时间siteTime();
Dabenshi
2023/05/26
4950
跨年快乐动态炫酷烟花网页代码
烟花效果的实现可以采用前端技术,如HTML、CSS和JavaScript。通过结合动画、粒子效果等技术手段,可以创建出独特而炫目的烟花效果。同时,考虑到性能和兼容性,需要确保效果在各种设备上都能够良好运行。
博客趣
2024/05/05
4410
❤️创意网页:迎接高考的倒计时网页(❤️好看好用❤️)HTML+CSS+JS
高考是每个学生都会经历的一次重要考试,它标志着一个人学业的结束和新的人生阶段的开始。为了庆祝高考的临近,我设计了一个令人兴奋和有趣的倒计时网页,旨在为学生们带来欢乐和动力。
命运之光
2024/03/20
4550
❤️创意网页:迎接高考的倒计时网页(❤️好看好用❤️)HTML+CSS+JS
❤️使用 HTML、CSS 和 JS 的简单倒数计时器 ❤️
在本文中,我使用了简单的 JavaScript 代码创建了一个倒数计时器和大家分享。
海拥
2021/09/14
6K0
❤️使用 HTML、CSS 和 JS 的简单倒数计时器 ❤️
博客前端美化记录(持续更新)
程序:Typecho 主题:Cuteen Version:4.1 作者:@Veen zhao
Y5neKO
2022/01/13
8030
博客前端美化记录(持续更新)
Typecho博客网站底部添加网站已运行时间教程
样式一: 1. 将代码放入 functions.php 一般在主题根目录:网站 /usr/themes/ 主题 修改一下你自己的网站时间 // 设置时区 date_default_timezone_set('Asia/Shanghai'); /** * 秒转时间,格式 年 月 日 时 分 秒 * */ function getBuildTime() { // 在下面按格式输入本站创建的时间 $site_create
季春二九
2023/03/22
7830
仅用18行JavaScript构建一个倒数计时器
因此,事不宜迟,这里介绍了如何仅用18行JavaScript来制作自己的倒计时时钟。
Lemon黄
2020/06/04
3.2K0
仅用18行JavaScript构建一个倒数计时器
使用 JavaScript 创建一个兔年春节倒数计时器
我们可以通过多种方式构建 JavaScript 倒数计时,我在本教程中展示的这个兔年春节倒数计时器 是由 HTML CSS 和 JavaScript 创建的。
海拥
2023/01/07
2.2K0
使用 JavaScript 创建一个兔年春节倒数计时器
原生JS实现分享侧边栏
分享一个用原生JS实现的分享侧边栏,实现效果如下: 以下是代码实现,方便大家复制粘贴。 <!DOCTYPE html> <html> <head lang="en"> <meta cha
越陌度阡
2020/11/26
2.8K0
原生JS实现分享侧边栏
原生HTML+CSS+JS制作自己的导航主页(前端大作业,源码+步骤详解)
咕咕了好久啦,今天使用原生HTML+CSS+JS做一个很简单的个人定制的导航主页吧!
全栈程序员站长
2022/09/15
7.3K2
原生HTML+CSS+JS制作自己的导航主页(前端大作业,源码+步骤详解)
为handsome博客添加侧边栏倒计时
代码/usr/themes/handsome/component/sitebar.php 大约第26行位置添加
小屁的博客
2022/05/13
3110
2023年元旦倒计时案例
IT从业者张某某
2023/10/16
2850
2023年元旦倒计时案例
友联样式美化
新建文件 博客根目录\source\_data\link.yml ,没有 _data 文件夹的话也请自己新建 打开 博客根目录\source\_data\link.yml ,输入
公爵
2022/09/28
5680
相关推荐
Typecho添加恋爱计时小组件-星泽V社
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档