一些html小van具

发表于 Waline： 本文字数： 5k 阅读时长 ≈ 5 分钟

emmm,最近因为毕业班，所以已经很久没有发过文章了
next主题的字体又不知道怎么回事失效了
友链朋友圈也没搞好
所以说实在是焦头烂额
但是我的信念是决不能让这个博客荒废
所以我这次的文章就是发一些之前收集到的html小玩意，我的博客也已经装载上了
enjoy:)

霓虹时钟

首先是霓虹时钟，你可以打开侧边栏（左下角点小按钮）就能看到效果了
以下要放到styles.styl里

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
/* 霓虹时钟 */
.words{
    font-size: 25px;
    font-weight: bold;
    text-transform: uppercase;
    fill: none;
    stroke-width: 1px;
    stroke-dasharray: 35,125;
    animation-name: drawing;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.words-1{
    stroke: deepskyblue;
    animation-delay: -1.5s;
}
.words-2{
    stroke: lightseagreen
    animation-delay: -3s;
}
.words-3{
    stroke: orange;
    animation-delay: -4.5s;
}
.words-4{
    stroke: purple;
    animation-delay: -6s;
}
@keyframes drawing {
    100%{
        stroke-dashoffset: -160
    }
}

以下放到你想让霓虹时钟出现的位置就好啦～

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!--霓虹时钟-->
<div>
    <svg>
        <text id="time" text-anchor="middle" x="36%" y="80%" class="words words-1"></text>
        <text id="time" text-anchor="middle" x="36%" y="80%" class="words words-2"></text>
        <text id="time" text-anchor="middle" x="36%" y="80%" class="words words-3"></text>
        <text id="time" text-anchor="middle" x="36%" y="80%" class="words words-4"></text>
    </svg>
</div>

<script>
function showtime(){
    var noatime = new Date();
    var h = noatime.getHours(),
        m = noatime.getMinutes(),
        s = noatime.getSeconds();
    h=checktime(h);
    m=checktime(m);
    s=checktime(s);
  return h+":"+m+":"+s;
}

function checktime(x){
  if(x<10){
    x="0"+x;
  }
  return x;
}

var div1=document.getElementsByTagName("text");
setInterval(function(){
  for (var i in div1){
      div1[i].innerHTML=showtime();
  }
},1000);
</script>

转圈小人

之前看到别人的博客上有，挺好玩的，扒下来

1
2
3
4
5
6
7
8
9
<!--两个小人在那转圈圈 -->
<div class="twopeople">
<div class="container" style="height:150px;">
    <canvas class="illo" width="800" height="800" style="max-width: 150px; max-height: 150px; touch-action: none; width: 650px; height: 650px;"></canvas>
</div>
<script src="https://s-bj-3444-blog.oss.dogecdn.com/cdn/twopeople/one.js"></script>
<script src="https://s-bj-3444-blog.oss.dogecdn.com/cdn/twopeople/two.js"></script>
<script src="https://s-bj-3444-blog.oss.dogecdn.com/cdn/twopeople/three.js" id="rendered-js"></script>
</div>

本站诞生时间

扒的，emm，我看到里面还有消耗内存统计的代码，动态博客才能生效…一并放在这里了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!--耗时及占用内存开始-->
<span id="momk"></span><span id="momk" style="color: #ff0000;"></span>
<script type="text/javascript">
function NewDate(str) {
str = str.split('-');
var date = new Date();
date.setUTCFullYear(str[0], str[1] - 1, str[2]);
date.setUTCHours(0, 0, 0, 0);
return date;
}
function momxc() {
<!--这里要改成自己博客的诞生时间-->
var birthDay =NewDate("2022-04-20");
var today=new Date();
var timeold=today.getTime()-birthDay.getTime();
var sectimeold=timeold/1000
var secondsold=Math.floor(sectimeold);
var msPerDay=24*60*60*1000; var e_daysold=timeold/msPerDay;
var daysold=Math.floor(e_daysold);
var e_hrsold=(daysold-e_daysold)*-24;
var hrsold=Math.floor(e_hrsold);
var e_minsold=(hrsold-e_hrsold)*-60;
var minsold=Math.floor((hrsold-e_hrsold)*-60); var seconds=Math.floor((minsold-e_minsold)*-60).toString();
document.getElementById("momk").innerHTML = "这个小站已经在互联网上飘荡了"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒"+"，真是太不容易了<br>";
setTimeout(momxc, 1000);
}momxc();
</script>
<style>
#momk{animation:change 10s infinite;font-weight:800; }
@keyframes change{0%{color:#5cb85c;}25%{color:#556bd8;}50%{color:#e40707;}75%{color:#66e616;}100% {color:#67bd31;}}
</style>
<?php printf(' | 耗时 %.3f 秒 | 查询 %d 次 | 内存 %.2f MB |',timer_stop( 0, 3 ),get_num_queries(),memory_get_peak_usage() / 1024 / 1024);?><br>
<!--耗时及占用内存结束-->

鼠标样式：大圆追小圆

嗯就是电脑版访问我博客时鼠标的样子，是不是挺好玩的？

1
2
3
4
5
6
7
8
9
10
<!--鼠标样式：两个同心圆，大圆追小圆-->
<style type="text/css">
#cursor{position:fixed;width:16px;height:16px;background:#009688;border-radius:8px;opacity:0.25;z-index:10086;pointer-events:none;transition:0.2s ease-in-out;transition-property:background,opacity,transform}
#cursor.hidden{opacity:0}
#cursor.hover{opacity:0.1;transform:scale(2.5)}
#cursor.active{opacity:0.5;transform:scale(0.5)}
#clickME{cursor:pointer;display:inline-block;border:1px solid #009688}
</style>
<script src="https://fastly.jsdelivr.net/gh/huangwb8/bloghelper@latest/js/cursor_01.js"></script>
<!--鼠标样式结束-->

搞定，成功水文