当前位置： 首页 > news >正文

Layui继续学习

news 2026/3/29 5:51:21

1、简单评论区代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>社区评论区</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.min.css">
</head>

<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-header">评论区</div>
                    <div class="layui-card-body">
                        <ul class="layui-timeline" id="commentList">

                        </ul>
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-card">
                    <div class="layui-card-header">发表评论</div>
                    <div class="layui-card-body">
                        <form class="layui-form">
                            <div class="layui-form-item">
                                <textarea name="content" lay-verify="required" placeholder="请输入评论内容"
                                    class="layui-textarea"></textarea>
                            </div>
                            <div class="layui-form-item">
                                <button class="layui-btn" lay-submit lay-filter="comment">发表</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/layui/2.6.8/layui.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        layui.use(['form', 'laytpl'], function () {
            var form = layui.form;
            var laytpl = layui.laytpl;
            var commentList = document.getElementById("commentList");

            // 模拟已有的评论数据
            var comments = [
                { username: '用户A', content: '这是第一条评论', time: '2022-01-01 12:00:00' },
                { username: '用户B', content: '这是第二条评论', time: '2022-01-02 12:00:00' },
                { username: '用户C', content: '这是第三条评论', time: '2022-01-03 12:00:00' },
            ];

            // 渲染评论列表
            function renderComments() {
                var getTpl = document.getElementById("commentTpl").innerHTML;
                laytpl(getTpl).render({ comments: comments }, function (html) {
                    commentList.innerHTML = html;
                });
            }

            renderComments();

            // 监听评论提交
            form.on('submit(comment)', function (data) {
                var comment = {
                    username: '当前登录用户',
                    content: data.field.content,
                    time: new Date().toLocaleString()
                };
                comments.push(comment);
                renderComments();

                // 清空输入框
                form.val('form-comment', { content: '' });
                return false;
            });
        });
    </script>

    <script type="text/html" id="commentTpl">
        {{# layui.each(d.comments, function(index, comment){ }}
        <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
                <h3 class="layui-timeline-title">{{ comment.username }} 评论于 {{ comment.time }}</h3>
                <p>{{ comment.content }}</p>
            </div>
        </li>
        {{# }); }}
    </script>
</body>

</html>

效果图：

代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
  <title>Layui新闻列表</title>
  <style>
      .layui-container {
        margin-top: 20px;
      }
      
      .layui-card-body {
        padding: 15px;
      }
      
      .layui-timeline-item {
        margin-bottom: 15px;
      }
      
      .layui-timeline-title {
        font-weight: bold;
        margin-bottom: 5px;
      }
      
      .layui-timeline-content {
        margin-left: 30px;
      }

  </style>
</head>
<body>
  <div class="layui-container">
    <div class="layui-row">
      <div class="layui-col-md8">
        <div class="layui-card">
          <div class="layui-card-header">新闻列表</div>
          <div class="layui-card-body">
            <ul class="layui-timeline" id="timeline"></ul>
          </div>
        </div>
      </div>
      <div class="layui-col-md4">
        <div class="layui-card">
          <div class="layui-card-header">新闻详情</div>
          <div class="layui-card-body" id="detail"></div>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
  <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
  <script >
      layui.use(['layer', 'jquery'], function(){
        var layer = layui.layer;
        var $ = layui.jquery;
      
        // 模拟新闻数据
        var newsData = [
          {
            title: 'KPL职业联赛',
            content: '新闻内容1'
          },
          {
            title: '新闻标题2',
            content: '新闻内容2'
          },
          {
            title: '新闻标题3',
            content: '新闻内容3'
          }
        ];
      
        // 生成新闻列表
        function generateTimeline() {
          var timeline = $('#timeline');
          timeline.empty();
      
          for (var i = 0; i < newsData.length; i++) {
            var item = newsData[i];
            var html = '<li class="layui-timeline-item">' +
              '<i class="layui-icon layui-timeline-axis">&#xe63f;</i>' +
              '<div class="layui-timeline-content layui-text">' +
              '<h3 class="layui-timeline-title">' + item.title + '</h3>' +
              '<p>' + item.content + '</p>' +
              '</div>' +
              '</li>';
      
            timeline.append(html);
          }
        }
      
        // 显示新闻详情
        $('#timeline').on('click', '.layui-timeline-item', function() {
          var index = $(this).index();
          var detail = $('#detail');
          detail.empty();
      
          var html = '<h2>' + newsData[index].title + '</h2>' +
            '<p>' + newsData[index].content + '</p>';
      
          detail.append(html);
        });
      
        generateTimeline();
      });

  </script>
</body>
</html>

效果图：

相关文章：

Layui继续学习

1、简单评论区代码&#xff1a; <!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>社区评论区</title> <link rel"stylesheet" href"https://cdn.staticfile.org/layui/2.6.8/css/…...

编程日记 2023/12/15 5:32:51

react+datav+echarts实现可视化数据大屏

&#x1f4d3;最近有点闲&#xff0c;就学习了下react&#xff0c;没想到就把react学完了&#xff0c;觉得还不错&#xff0c;就打算出一把reactdatav的简易版可视化数据大屏供大家做个参考。 &#x1f4d3;效果如下 1下载必要的框架 &#x1f4d3; react路由 npm install re…...

编程日记 2023/12/15 5:31:51

CSS新手入门笔记整理：CSS浮动布局

文档流概述 正常文档流 “文档流”指元素在页面中出现的先后顺序。正常文档流&#xff0c;又称为“普通文档流”或“普通流”&#xff0c;也就是W3C标准所说的“normal flow”。正常文档流&#xff0c;将一个页面从上到下分为一行一行&#xff0c;其中块元素独占一行&#xf…...

编程日记 2023/12/15 5:30:50

微服务组件Sentinel的学习（1）

Sentinel学习笔记&#xff08;1&#xff09; Sentinel基本概念Sentinel功能和设计理念流量控制熔断降级系统负载保护 Sentinel基本概念 资源 资源是Sentinel的关键概念。它可以是 ava应用程序中的任何内容&#xff0c;例如&#xff0c;由应用程序提供的服务&#xff0c;或由应…...

编程日记 2023/12/15 5:29:49

小程序 -网络请求post/get

1.1网络请求的概念(post和get) 1.2步骤 1.3 应用函数 js里面写&#xff0c;用bindtap绑在控件上&#xff0c;就不讲了 实例代码&#xff1a; //发起get数据请求get_info(){wx.request({url:https://www.escook.cn/api/get,//请求的接口地址,必须基于https协议//请求的方式met…...

编程日记 2023/12/15 5:28:48

Elasticsearch 8.10之前同义词最佳实践

1、同义词在搜索引擎领域用途 同义词在搜索引擎领域的用途可概括如下： 增强搜索的准确性——当用户输入一个关键词时，可能与他们实际意图相关的文档使用了一个不同的关键词或短语。同义词允许搜索引擎理解和识别这些情况，返回更准确的结果。如：“遥遥领先”和“华为Meta60…...

编程日记 2023/12/15 5:27:47

芯知识 | 什么是OTP语音芯片？唯创知音WTN6xxx系列：低成本智能语音解决方案

什么是OTP语音芯片&#xff1f; OTP&#xff0c;即一次性可编程&#xff08;One-Time Programmable&#xff09;&#xff0c;语音芯片是一类具有独特编程特性的嵌入式语音存储解决方案。与可重复擦写&#xff08;Flash型&#xff09;语音芯片不同&#xff0c;OTP语音芯片一经烧…...

编程日记 2023/12/15 5:26:46

Linux内核密钥环

Linux内核密钥环&#xff08;Linux Kernel Keyring&#xff09;是Linux内核中的一个机制&#xff0c;用于管理和存储各种类型的密钥和安全相关的数据。它是Linux内核提供的一种可编程的安全子系统&#xff0c;用于处理密钥的生成、存储、检索和删除等操作。 Linux内核密钥环的…...

编程日记 2023/12/15 5:25:44

web前端之正弦波浪动功能、repeat、calc

MENU 效果图htmlstylecalcrepeat 效果图 html <div class"grid"><span class"line"></span><span class"line"></span><span class"line"></span><span class"line"><…...

编程日记 2023/12/15 5:24:43

使用工具 NVM来管理不同版本的 Node.js启动vue项目

使用工具如 NVM&#xff08;Node Version Manager&#xff09;来管理不同版本的 Node.js。NVM 允许你在同一台计算机上安装和切换不同版本的 Node.js。以下是一些步骤&#xff0c;以便同时在你的系统中安装两个 Node.js 版本&#xff1a; 安装 NVM: 首先&#xff0c;你需要安装…...

编程日记 2023/12/15 5:23:42

Xcode编写基于C++的动态连接库(dylib)且用node-ffi-napi测试

创建一个dylib工程示例 在 Xcode 中创建一个动态链接库&#xff08;.dylib 文件&#xff09;的步骤如下&#xff1a; 打开 Xcode&#xff1a; 打开 Xcode 应用程序。 创建新的工程&#xff1a; 选择 "Create a new Xcode project"&#xff0c;或者使用菜单 File &g…...

编程日记 2023/12/15 5:22:41

WPF-UI HandyControl 简单介绍

文章目录 前言我的网易云专栏和Gitee仓库HandyControlHandyControl示例相关资源地址 我的运行环境快速开始和Material Design功能对比手风琴右键菜单自动补充滚动条轮播图消息通知步骤条托盘按钮 结尾 前言 最近我在研究如何使用WPF做一个比较完整的项目&#xff0c;然后我就先…...

编程日记 2023/12/15 5:21:39

golang学习笔记——数据结构进阶

文章目录 数据结构进阶mapmap示例sliceinterfaceembedded 数据结构进阶 常见数据结构实现原理 本章主要介绍常见的数据结构&#xff0c;比如channel、slice、map等&#xff0c;通过对其底层实现原理的分析&#xff0c;来加深认识&#xff0c;以此避免一些使用过程中的误区。 …...

编程日记 2023/12/15 5:20:38

TrustZone之总线请求

接下来&#xff0c;我们将查看系统中的总线请求者&#xff0c;如下图所示&#xff1a; 系统中的A型处理器具有TrustZone感知&#xff0c;并在每个总线访问中发送正确的安全状态。然而&#xff0c;大多数现代SoC还包含非处理器总线请求者&#xff0c;例如GPU和DMA控制器。 与完成…...

编程日记 2023/12/15 5:18:37

vue2+Echarts数据可视化 【帕累托图】

接口得到的数据如下 要经过排序 &#xff0c;计算累计百分比得到数据 蓝色 柱状图数据&#xff1a; 取count字段值 横坐标&#xff1a;取 id值 折线图&#xff1a;根据柱状图的数据计算累计百分比 getInterface(data) {getParetoChart(data).then((res) > {if (res) {thi…...

编程日记 2023/12/15 5:17:36

imazing 2.17.16中文版怎么备份iPhone手机照片

imazing 2.17.16中文版备份功能非常强大&#xff0c;在进行备份之前&#xff0c;需要对其进行设置&#xff0c;才能充分使用备份功能。当移动设备与电脑第一次连接成功后&#xff0c;会询问是否要立即备份&#xff0c;个人的建议是选择“稍后”&#xff0c;小伙伴可以先对软件进…...

编程日记 2023/12/15 5:16:35

05 python数据容器

5.1 数据容器认识 5.2 python列表 5.2.1 列表的定义 演示数据容器之&#xff1a;list 语法&#xff1a;[元素&#xff0c;元素&#xff0c;....] #定义一个列表List List [itheima,uityu,gsdfg] List1 [itheima,6666,True] print(List) print(List1) print(type(List)) pr…...

编程日记 2023/12/15 5:15:34

相机倾斜棋盘格标定全记录 vs200+opencv安装

论文参考是这个 Geiger A, Moosmann F, Car , et al. Automatic camera and range sensor calibration using a single shot[C]//Robotics and Automation (ICRA), 2012 IEEE International Conference on. IEEE, 2012: 3936-3943. 代码是这个github 花了一上午配好了c环境。。…...

编程日记 2023/12/15 5:14:33

QT- QT-lximagerEidtor图片编辑器

QT- QT-lximagerEidtor图片编辑器 一、演示效果二、关键程序三、下载链接 功能如下&#xff1a; 1、缩放、旋转、翻转和调整图像大小 2、幻灯片 3、缩略图栏&#xff08;左、上或下&#xff09;&#xff1b;不同的缩略图大小 4、Exif数据栏 5、内联图像重命名 6、自定义快捷方式…...

编程日记 2023/12/15 5:13:32

PyQt 如何通过连续点击托盘图标显示隐藏主窗口并且在主窗口隐藏时调整界面到托盘图标附近

不废话直接看代码 # -*- codingutf-8 -*- # # author: Ruben # mail: 773849069qq.com # time: 2023/12/8 # u""" 一个托盘图标的小部件 """ from Qt import QtWidgets, QtGui, QtCore# --*--*--*--*--*--*--*--*--*--…...

编程日记 2023/12/15 5:10:30

【信号处理实战】从原理到代码：手把手实现三次样条插值

1. 三次样条插值&#xff1a;从数学定义到生活场景 想象你正在用一根柔软的弹性尺子连接一组图钉&#xff0c;这些图钉固定在木板上代表你的数据点。这根尺子需要光滑地穿过每一个图钉&#xff0c;同时保持自然的弯曲形态——这就是三次样条插值要解决的问题。作为信号处理中最…...

编程新知 2026/3/29 4:41:21

Vue.js前端项目集成AI：SmallThinker-3B-Preview实现智能表单与对话

Vue.js前端项目集成AI&#xff1a;SmallThinker-3B-Preview实现智能表单与对话 1. 引言&#xff1a;当Vue.js遇见AI 你有没有遇到过这样的场景&#xff1f;用户填写一个复杂的表单&#xff0c;面对几十个选项不知所措&#xff1b;或者客服系统里&#xff0c;用户问了一个稍微…...

编程新知 2026/3/29 4:25:06

LM358运放实战：手把手教你搭建电容传感器测量电路（附常见问题排查）

LM358运放实战&#xff1a;手把手教你搭建电容传感器测量电路&#xff08;附常见问题排查&#xff09; 在电子设计领域&#xff0c;电容式传感器因其非接触式测量、结构简单和成本低廉等优势&#xff0c;被广泛应用于液位检测、接近开关和湿度测量等场景。而要将微弱的电容变化…...

编程新知 2026/3/29 4:00:52

Linux系统auditd审计服务实战：从零配置到规则优化（附常用命令大全）

Linux系统auditd审计服务实战&#xff1a;从零配置到规则优化&#xff08;附常用命令大全&#xff09; 当服务器遭遇入侵时&#xff0c;大多数管理员的第一反应往往是查看历史命令记录。但现实情况是&#xff0c;黑客通常会第一时间清空.bash_history文件。这时&#xff0c;一个…...

编程新知 2026/3/29 1:55:45

Matrix Motor Extension：四通道嵌入式电机驱动模块详解

1. 项目概述Matrix Motor Extension 是一款面向嵌入式控制场景的四通道直流电机驱动扩展模块&#xff0c;专为需要多轴独立运动控制的智能硬件平台设计。其核心定位并非通用型电机驱动板&#xff0c;而是作为主控系统&#xff08;如 STM32、ESP32、Raspberry Pi Pico 等&#x…...

编程新知 2026/3/29 0:35:10

3个维度掌握Seed-VC：零样本语音转换工具实战指南

3个维度掌握Seed-VC&#xff1a;零样本语音转换工具实战指南 【免费下载链接】seed-vc zero-shot voice conversion & singing voice conversion, with real-time support 项目地址: https://gitcode.com/GitHub_Trending/se/seed-vc 语音转换技术正经历从"训练…...

编程新知 2026/3/28 23:36:46

OpenClaw技能市场盘点：10个适配Qwen3.5-4B-Claude的实用模块

OpenClaw技能市场盘点&#xff1a;10个适配Qwen3.5-4B-Claude的实用模块 1. 为什么需要关注技能市场&#xff1f; 去年冬天&#xff0c;当我第一次在本地部署OpenClaw时&#xff0c;最让我惊喜的不是框架本身&#xff0c;而是它背后那个不断生长的技能市场。作为一个长期被重…...

编程新知 2026/3/28 23:04:21

ESP32开发终极指南：5个关键更新助你构建更强大的物联网设备

ESP32开发终极指南&#xff1a;5个关键更新助你构建更强大的物联网设备 【免费下载链接】arduino-esp32 Arduino core for the ESP32 项目地址: https://gitcode.com/GitHub_Trending/ar/arduino-esp32 ESP32 Arduino核心项目为ESP32系列芯片提供了完整的Arduino开发环境…...

编程新知 2026/3/28 21:56:00

Czkawka磁盘清理工具：通过多线程哈希技术实现300%扫描效率提升

Czkawka磁盘清理工具&#xff1a;通过多线程哈希技术实现300%扫描效率提升 【免费下载链接】czkawka 一款跨平台的重复文件查找工具&#xff0c;可用于清理硬盘中的重复文件、相似图片、零字节文件等。它以高效、易用为特点&#xff0c;帮助用户释放存储空间。 项目地址: htt…...

编程新知 2026/3/28 21:01:36

小白程序员快看！轻松入门大模型驱动的AI Agent，收藏这份超全学习指南！

本文以通俗易懂的语言介绍了AI Agent的概念、构成、分类及工作流程&#xff0c;并与传统软件进行了对比&#xff0c;阐述了AI Agent的核心优势。同时&#xff0c;文章还列举了AI Agent的常见应用场景&#xff0c;并推荐了5个适合新手使用的开发工具&#xff0c;最后通过一个实际…...

编程新知 2026/3/28 20:37:25