Memos API 公告样式滚动效果

2023-03-07 15:03:06 浏览数 (1)

注意

本文最后更新于 2022-11-06，文中内容可能已过时。

Memos 简介系列

  • Memos 简介
  • Memos 手动导入数据
  • Memos API 调用渲染页面
  • Memos API 公告样式滚动效果
  • Memos API 获取总条数

本博客没有找到合适的位置放置公告栏，已暂时移动滚动公告效果。

DEMO 可参考我的个人导航：https://s.eallion.com

  1. 首先需要在网页上合适的位置放置一个 CSS 选择器来展示 Memos，ID 命名为 memos 好了。

核心代码：

代码语言：javascript复制
<div id="memos" class="memos"></div>

参考：index.debug.html#L124

  1. 然后用 JS 把 API 获取到的数据处理成 Json，再展示到 CSS 选择器里：
代码语言：javascript复制
<!--引入相对时间 Lately 插件-->
<script src="//tokinx.github.io/lately/lately.min.js"></script>

<!--JS 处理 Memos API-->
<script>
    let jsonUrl =
        "https://demo.usememos.com/api/memo?creatorId=101&rowStatus=NORMAL&limit=1&offset=2"  
        "&t="  
        Date.parse(new Date());

    fetch(jsonUrl)
        .then((res) => res.json())
        .then((resdata) => {
            var result = "",
                resultAll = "",
                data = resdata.data;
            for (var i = 0; i < data.length; i  ) {
                var talkTime = new Date(
                    data[i].createdTs * 1000
                ).toLocaleString();
                var talkContent = data[i].content;
                var newtalkContent = talkContent
                    .replace(/```([sS]*?)```[s]*/g, " <code>$1</code> ") //全局匹配代码块
                    .replace(/`([sS ]*?)`[s]*/g, " <code>$1</code> ") //全局匹配内联代码块
                    .replace(/![[sS]*?]([sS]*?)/g, "


	


api c++ css javascript 




	






	

 0 人点赞