分类 前端 下的文章

前段些天发现每过一段时间电脑的时间总会出现一些误差,之前总是使用自带的授时服务器(ntp)进行更新,但是经常遇到更新失败的问题,后来听liangke说他都是使用国家授时中心的ntp服务,由于是国内网络连接比较好,很快就可以同步完成。就决定也使用国内的ntp服务。

那天,想到自己手上一直荒废的域名 t.hm ,似乎还比较合适,就解析了过去。你还别说,效果还不错呢。

后来又做了个显示时间的页面 https://www.t.hm
其中使用了JQuery的AJAX和定时任务两非常实用的功能,就记在这里,说不定还用的上的。

这里主要用了两个插件:dayjs 和 jquery。

哦,还有一个很奇葩的BUG,Safari浏览器不支持解析yyyy-mm-dd格式的时间,所以需要修改时间格式(我这里用的是/代替的-)。

<script>
    // 初始化时间变量
    var localTime;

    getServerTime();
    setInterval(getServerTime, 10 * 60 * 1000); 

    // 每秒更新本地时间显示
    setInterval(updateLocalTime, 1000);

    // 函数:获取服务器时间
    function getServerTime() {
        $.ajax({
            url: 'time.php',
            type: 'GET',
            success: function(response) {
                setLocalTime();
            },
            error: function() {
                // 处理请求失败的情况
            }
        });
    }

    // 设置服务器时间为当前时间
    function setLocalTime() {
        if (serverTime) {
            localTime = new dayjs(serverTime);
        }else{
            console.log('serverTime:'+serverTime);
        }
    }

    // 函数:更新本地时间显示
    function updateLocalTime() {
        if (localTime) {
            tmp = dayjs(localTime).format('YYYY-MM-DD HH:mm:ss ZZ');
            $('#time').text(tmp);
            $("#title").text(tmp+' - t.hm 授时服务');
            localTime = dayjs(localTime).add(1,'s');
        }
        //console.error('localTime:'+localTime);
    }
</script>

本来想要随便放一个小视频的,结果丢上去之后各个浏览器显示结果很不一样,折腾了半天算了稍微顺眼一点点,为了防止以后再遇到,就放这里做个笔记,说不定什么时候又用的上呢。

    <script type="text/javascript">
        var ww = $(window).width();
        var hh = $(window).height();

        var video = $('#myVideo');

        video.on('loadedmetadata', function() {
            var videow = video.prop('videoWidth');
            var videoh = video.prop('videoHeight');
            var nn = videow/videoh;
            var xw = xh = 0;

            if(ww>videow && hh>videoh){
                xw = videow * 0.9;
                xh = videoh * 0.9;
            }else if(ww/hh > nn) {
                xh = hh * 0.6;
                xw = xh * nn;
            }else{
                xw = ww * 0.95;
                xh = xw / nn;
            }
            video.width(xw);
            video.height(xh);
        });
    </script>

Markdown是一种纯文本格式的标记语言。通过简单的标记语法,它可以使普通文本内容具有一定的格式。
想看原版请去 MarkDown教程

一、标题
在想要设置为标题的文字前面加#来表示
一个#是一级标题,二个#是二级标题,以此类推。支持六级标题。
注:标准语法一般在#后跟个空格再写文字,貌似简书不加空格也行。
示例:

# 这是一级标题
## 这是二级标题
### 这是三级标题
#### 这是四级标题
##### 这是五级标题
###### 这是六级标题

效果如下:

这是一级标题

这是二级标题

这是三级标题

这是四级标题

这是五级标题
这是六级标题

二、字体
加粗 要加粗的文字左右分别用两个*号包起来
斜体 要倾斜的文字左右分别用一个*号包起来
斜体加粗 要倾斜和加粗的文字左右分别用三个*号包起来
删除线 要加删除线的文字左右分别用两个~~号包起来
示例:

**这是加粗的文字**
*这是倾斜的文字*`
***这是斜体加粗的文字***
~~这是加删除线的文字~~

效果如下:
这是加粗的文字
这是倾斜的文字`
这是斜体加粗的文字
这是加删除线的文字

三、引用
在引用的文字前加>即可。引用也可以嵌套,如加两个>>三个>>>n个...
示例:

>这是引用的内容
>>这是引用的内容
>>>>>>>>>>这是引用的内容

效果如下:

这是引用的内容

这是引用的内容

这是引用的内容

四、分割线
三个或者三个以上的 - 或者 * 都可以。
示例:

---
----
***
*****

效果如下:




可以看到,显示效果是一样的。

五、图片
语法:![图片alt](图片地址 ''图片title'')
图片alt就是显示在图片下面的文字,相当于对图片内容的解释。
图片title是图片的标题,当鼠标移到图片上时显示的内容。title可加可不加

示例:

![示例图片](https://yangkexi.cn/usr/uploads/2023/10/254895680.jpg ''示例图片'')

或者使用[1]引用文章最后面的链接,数字是链接代号。

![示例图片][1]
  [1]: https://yangkexi.cn/usr/uploads/2023/10/254895680.jpg

二者显示效果相同,如下:
 title=

六、超链接
语法:[超链接名](超链接地址 "超链接title")title可加可不加
网址和邮箱地址可以很快速的加<>变为可点链接。
示例:

[创意基地](https://ab.cd)
[创意基地](https://ab.cd "一个有创意地方")
<https://test.com>
<mail@test.com>
[tips](#tips)

效果如下:
创意基地
创意基地
https://test.com 网址
mailto:mail@test.com 邮箱
tips 页面内锚点
注:Markdown本身语法不支持链接在新页面中打开,如果想要在新页面中打开的话可以用html语言的a标签代替。
<a href="超链接地址" target="_blank">超链接名</a>

七、列表
无序列表
语法:
无序列表用 - + * 任何一种都可以。
注意:- + * 跟内容之间都要有一个空格

- 列表内容
+ 列表内容
* 列表内容

效果如下:

  • 列表内容
  • 列表内容
  • 列表内容

有序列表
语法:数字加点
注意:序号跟内容之间要有空格

1. 列表内容
2. 列表内容
3. 列表内容

效果如下:

  1. 列表内容
  2. 列表内容
  3. 列表内容

列表嵌套
下一级之前加三个空格即可

  • 一级无序列表内容

    • 二级无序列表内容
    • 二级无序列表内容
    • 二级无序列表内容
  • 一级无序列表内容

    1. 二级有序列表内容
    2. 二级有序列表内容
    3. 二级有序列表内容
  • 一级有序列表内容

    • 二级无序列表内容
    • 二级无序列表内容
    • 二级无序列表内容
  • 一级有序列表内容

    1. 二级有序列表内容
    2. 二级有序列表内容
    3. 二级有序列表内容

八、表格
语法:

表头|表头|表头
---|:--:|---:
内容|内容|内容
内容|内容|内容

第二行分割表头和内容。
-有一个就行,为了对齐,多加了几个

文字默认居左
-两边加\:表示文字居中
-右边加\:表示文字居右
注:原生的语法两边都要用 | 包起来,好像可以省略。

示例:

姓名|技能|排行
--|:--:|--:
刘备|哭|大哥
关羽|打|二哥
张飞|骂|三弟

效果如下:

姓名技能排行
刘备大哥
关羽二哥
张飞三弟

九、代码
语法:单行代码:代码之间分别用一个反引号包起来(就是ESC下面的那个符号)

`代码内容`

代码块:代码头尾用三个反引号(`)独占一行,或者在代码前加四个空格或1个TAB。
方法1,加三个反引号:

\```
代码1...
代码2...
代码3...
\```

方法2,加四个空格或1个tab

\    代码1...
\    代码2...
\    代码3...

注:为了防止转译,前面加了\,实际使用中去掉\。

示例:
单行代码

`create database hero;`

代码块

\```
    function fun(){
         echo "这是一句非常牛逼的代码";
    }
    fun();
\```

效果如下:(实际使用中去掉\)
单行代码
create database hero;
代码块

function fun(){
  echo "这是一句非常牛逼的代码";
}
fun();

十、流程图

flow
st=>start:start
op=>operation: My Operation
cond=>condition: Yes or No?
e=>end
st->op->cond
cond(yes)->e
cond(no)->op

效果如下:
(我这个typecho,流程图功能还没有就没法展示了,先记着吧)

MarkDown教程