Layui继续学习

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>

效果图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/221052.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

1+X大数据平台运维职业技能等级证书中级

hadoop&#xff1a; 由于我的功能限制&#xff0c;我无法直接为您执行这些操作或提供实际的截图。但我可以为您提供一步步的指导&#xff0c;帮助您完成这些任务。 1. 解压JDK安装包到“/usr/local/src”路径&#xff0c;并配置环境变量。 - 解压JDK&#xff1a;tar -zxf jd…

安装mysql时为什么要在linux中新建mysql用户组和用户

在Linux中安装MySQL时创建专用的用户和用户组主要有以下几个原因&#xff1a; 安全&#xff1a; 分离权限&#xff1a;使用独立的MySQL用户和用户组运行MySQL服务&#xff0c;可以防止数据库进程以root或其他特权用户身份运行。这样即使MySQL服务器被攻击&#xff0c;潜在的危害…

CSS盒模型 盒子尺寸问题

什么是盒模型 CSS盒模型分为用来放置内容的content区域&#xff0c;用来调整内容和边框距离的padding区域。用来限制盒子边界的border区域以及用于调整盒子之间距离的margin区域。现在去掉margin&#xff0c;只考虑盒子内部的尺寸问题。 我们先来制作一个盒子。 <!DOCTYPE…

一篇文章让你快速入门Redis(含安装使用客户端)

声明&#xff1a;文章内容皆取于学习黑马课程、若想了解原版内容请去B站了解黑马程序员Redis课程 1.Redis入门篇 1.什么是Redis Redis全称为Remote Dictionary Server,远程词典服务器,基于内存的键值型NoSQL数据库 NoSQL(Not only SQL)是对不同于传统的关系数据库的数据库管…

芸鹰蓬飞:抖店的运营技巧是什么?

抖店&#xff0c;作为抖音平台上的电商业务&#xff0c;为商家提供了一个全新的销售渠道。然而&#xff0c;要成功运营抖店&#xff0c;商家需要掌握一定的方法和技巧。下面&#xff0c;我们就来详细介绍一下抖店的运行方式。 商品选择&#xff1a;首先&#xff0c;商家需要选择…

单片稳压集成电路78LXX系列——固定的电压输出,适用于需100mA电源供给的应用场合(网络产品,声卡和电脑主板等产品)

78LXX系列是一款单片稳压集成电路&#xff0c;它们有一系列固定的电压输出&#xff0c;适用于需100mA电源供给的应用场合。78LXX系列采用T0-92和SOT-89-3L的封装形式。 主要特点&#xff1a; ● 最大输出电流为100mA ● 输出电压为3.3V. 5V. 6V. 8V、9V、10V、 12V和15V ● 热…

网络面试题总结

url从输入到渲染页面的全过程 URL 从输入到页面渲染可以分为以下步骤&#xff1a; 输入 URL&#xff1a;在浏览器地址栏中输入 URL&#xff08;统一资源定位符&#xff09;。DNS 解析&#xff1a;浏览器通过 DNS&#xff08;域名系统&#xff09;将 URL 解析成 IP 地址&#…

美易官方:美联储FOMC声明重点

美联储FOMC声明重点 美联储FOMC声明是美联储货币政策的重要文件&#xff0c;其重点内容主要包括以下几个方面&#xff1a; 1. 利率政策 美联储FOMC声明中最重要的内容之一是利率政策。声明会明确美联储的利率目标区间&#xff0c;以及未来可能的调整方向。利率政策是美联储调节…

git查看commit提交记录详情

相关的命令 git log&#xff1a;查看所有的commit提交记录&#xff1b;git show&#xff1a; 查看提交的详情&#xff1b; 首先&#xff0c;需要通过git log显示所有commit记录&#xff1a; 查看最新的commit&#xff1a;git show查看指定commit的所有修改&#xff1a;git s…

Zxing库的使用⭐️实现给自己的博客主页生成一张二维码链接,有源码可以直接复制到本地执行

目录 前言 一、简介 二、本地实现 2.1 引入依赖&#xff08;根据自己springboot项目来&#xff09; 2.2 实现类 三、运行一次 前言 小伙伴们大家好&#xff0c;自从地铁上刷到Zxing库的使用后&#xff0c;一直想本地部署玩一玩 一、简介 ZXing&#xff08;全称为 Zebra Cr…

Mac搭建Frida逆向开发环境

一、简介 Frida是一种基于Python+JavaScript的动态分析工具,可以用于逆向开发、应用程序的安全测试、反欺诈技术等领域,本质是一种动态插桩技术。Frida主要用于在已安装的应用程序上运行自己的JavaScript代码,从而进行动态分析、调试、修改等操作,能够绕过应用程序的安全措…

nodejs使用express框架启动服务操作mysql数据库

描述: 首先在本地搭建mysql数据库,配置:host: ‘192.168.3.249’,user: ‘mkx’,password: ‘123456’,database: ‘gg’.测试连接正常.使用express写两个接口, 1.查询所有学生的接口,使用的get请求,无参数. 2.插入一条学生信息,使用post请求,body是一个json的学生信息{name:“…

土壤科学灌溉CG-36 土壤水势传感器

土壤科学灌溉CG-36 土壤水势传感器产品概述 土壤水势传感器可以很方便地插入到土壤剖面坑中&#xff0c;在其周围包裹上湿土即可。测定和记录非常简单。免维护、无需校准即可测量较大范围的土壤水势&#xff1b;无需灌水&#xff0c;大量程使得它成为测量自然系统水势的理想传…

十个Vue3实用但是冷门的API

文章目录 一、前言二、readonly三、shallowRef四、shallowReactive五、toRef & toRefs5.1、 toRef5.2、toRefs 六、toRaw & markRaw & unref6.1、toRaw6.2、markRaw6.3、unref 七、effectScope & onScopeDispose7.1、收集副作用7.2、全局状态管理 八、provide …

Docker - Android源码编译与烧写

创建源代码 并挂载到win目录 docker run -v /mnt/f/android8.0:/data/android8.0 -it --name android8.0 49a981f2b85f /bin/bash 使用 docker update 命令动态调整内存限制&#xff1a; 重新运行一个容器 docker run -m 512m my_container 修改运行中容器 显示运行中容器 d…

【1day】复现I Doc View系统upload接口任意文件读取漏洞

注:该文章来自作者日常学习笔记,请勿利用文章内的相关技术从事非法测试,如因此产生的一切不良后果与作者无关。 目录 一、漏洞描述 二、影响版本 三、资产测绘 四、漏洞复现

【剑指offer|图解|二分查找】点名 + 统计目标成绩的出现次数

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;剑指offer每日一练 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 一. ⛳️点名1.1 题目1.2 示例1.3 限制1.4 解题思路一c代码 1.5 解题思路二c代码 二. ⛳️统计目标成绩…

开发信的基本要点有哪些?如何撰写开发信?

开发信的关键要素是什么&#xff1f;外贸开发信的写作技巧方法&#xff1f; 开发信是一种至关重要的沟通工具&#xff0c;无论是初创企业还是已经建立的公司&#xff0c;开发信都是与潜在客户、合作伙伴或投资者建立联系的关键步骤。蜂邮将讨论开发信的基本要点&#xff0c;以…

(NeRF学习)3D Gaussian Splatting Instant-NGP环境配置

学习参考&#xff1a; 3D gaussian splatting 安装步骤拆解23.9月3D Gaussian Splatting入门指南【五分钟学会渲染自己的NeRF模型&#xff0c;有手就行&#xff01;】 三维重建instant-ngp环境部署与colmap、ffmpeg的脚本参数使用 一、3D Gaussian Splatting &#xff08;一&…

快看!AI竟然可以这样……

自从ChatGPT诞生之后&#xff0c;还有谁不知道AI的名号吗&#xff1f;我相信只有极少部分人吧。人工智能技术在21世纪粉墨登场&#xff0c;拉开了信息化时代的蓝图&#xff0c;被广泛应用于各个产业&#xff0c;来实现产业赋能&#xff0c;推动了经济社会的快速发展。 5G使用还…