Javascript-web API-day04
文章目录
- 01-实例化日期对象
- 02-常见的日期对象方法
- 03-年月日案例
- 04-年月日简化
- 05-得到时间戳
- 06-倒计时
- 07-关闭节点
- 08-子节点
- 09-增加节点
- 10-克隆节点
- 11-删除节点
- 12-m端时间
- 13-(swiper插件的使用)
- 移动端轮播图
- 游乐园项目
- 学成在线重构
01-实例化日期对象
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 实例化 new// 1.得到当前时间const date = new Date()console.log(date)// 2.得到指定时间const date1 = new Date('2025-1-1 00:00:00')console.log(date1);</script>
</body></html>
02-常见的日期对象方法
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 获得日期对象const date = new Date()// 使用里面的方法console.log(date.getFullYear());console.log(date.getMonth() + 1);console.log(date.getDate());console.log(date.getDay()); // 打印当前星期几console.log(date.getHours()); // 打印当前小时数// 案例：年月日 时分console.log(`${date.getFullYear()}:${date.getMonth() + 1}:${date.getDate()} ${date.getHours()}:${date.getMinutes}`);</script>
</body></html>
03-年月日案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 40px;border: 1px solid #000;text-align: center;line-height: 40px;}</style>
</head><body><div></div><script>const div = document.querySelector('div')function getmyDate() {const date = new Datelet h = date.getHours()let m = date.getMinutes()let s = date.getSeconds()h = h > 10 ? h : '0' + hm = m > 10 ? m : '0' + ms = s > 10 ? s : '0' + sreturn `${date.getFullYear()}:${date.getMonth() + 1}:${date.getDate()} ${h}:${m}:${s}`}div.innerHTML = getmyDate()setInterval(function () {div.innerHTML = getmyDate()}, 1000)</script>
</body></html>
04-年月日简化
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 40px;border: 1px solid #000;text-align: center;line-height: 40px;}</style>
</head><body><div></div><script>const div = document.querySelector('div')const date = new Datediv.innerHTML = date.toLocaleString()// div.innerHTML = date.toLocaleDateString()// div.innerHTML = date.toLocaleTimeString()setInterval(function () {const date = new Datediv.innerHTML = date.toLocaleString()}, 1000)</script>
</body></html>
05-得到时间戳
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 1.getTimeconst date = new Date()console.log(date.getTime)// 2. +new.Date()console.log(+new Date())// 3.Date.now()console.log(Date.now())// 2.+new Date()console.log(+new Date())console.log('--------------')console.log(+new Date('2024-12-30 18:30:00'))// 根据日期返回星期const arr = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']console.log(arr[new Date().getDay()])</script>
</body></html>
06-倒计时
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.countdown {width: 240px;height: 305px;text-align: center;line-height: 1;color: #fff;background-color: brown;/* background-size: 240px; *//* float: left; */overflow: hidden;}.countdown .next {font-size: 16px;margin: 25px 0 14px;}.countdown .title {font-size: 33px;}.countdown .tips {margin-top: 80px;font-size: 23px;}.countdown small {font-size: 17px;}.countdown .clock {width: 142px;margin: 18px auto 0;overflow: hidden;}.countdown .clock span,.countdown .clock i {display: block;text-align: center;line-height: 34px;font-size: 23px;float: left;}.countdown .clock span {width: 34px;height: 34px;border-radius: 2px;background-color: #303430;}.countdown .clock i {width: 20px;font-style: normal;}</style>
</head><body><div class="countdown"><p class="next">今天是2222年2月22日</p><p class="title">下班倒计时</p><p class="clock"><span id="hour">00</span><i>:</i><span id="minutes">25</span><i>:</i><span id="scond">20</span></p><p class="tips">22:30:00下课</p></div><script>function getColor(flag = 0) {// #fffffflet color = '#'if (flag) {let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f']for (let i = 0; i < 6; i++) {let num = Math.floor(Math.random() * arr.length)color = color + arr[num]}return color} else {// rgb(255,255,255)let r = Math.floor(Math.random() * 256)let g = Math.floor(Math.random() * 256)let b = Math.floor(Math.random() * 256)return `rgb(${r}, ${g}, ${b})`}}function getCountTime() {// 当前时间const date = new Date()const next = document.querySelector('.next')next.innerHTML = `今天是${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`// 1.得到当前时间戳const now = +new Date()// 2.得到下班时间戳const future = +new Date('2024-12-30 22:30:00')//3.剩余时间戳 单位秒const count = (future - now) / 1000// 4.转换成 时分秒let h = parseInt(count / 60 / 60 % 24)h = h < 10 ? '0' + h : hlet m = parseInt(count / 60 % 60)m = m < 10 ? '0' + m : mlet s = parseInt(count % 60)s = s < 10 ? '0' + s : s// 把时分秒写到盒子里const hour = document.querySelector('#hour')const minutes = document.querySelector('#minutes')const scond = document.querySelector('#scond')hour.innerHTML = hminutes.innerHTML = mscond.innerHTML = s}getCountTime()setInterval(getCountTime, 1000)const countdown = document.querySelector('.countdown')countdown.style.backgroundColor = getColor()</script>
</body></html>
07-关闭节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {position: relative;width: 1000px;height: 200px;background-color: pink;margin: 100px auto;text-align: center;font-size: 50px;line-height: 200px;font-weight: 700;}.box1 {position: absolute;right: 20px;top: 10px;width: 20px;height: 20px;background-color: skyblue;text-align: center;line-height: 20px;font-size: 16px;cursor: pointer;}</style>
</head><body><div class="box">我是广告<div class="box1">X</div></div><div class="box">我是广告<div class="box1">X</div></div><div class="box">我是广告<div class="box1">X</div></div><script>// // 1. 获取事件源// const box1 = document.querySelector('.box1')// // 2. 事件侦听// box1.addEventListener('click', function () {// this.parentNode.style.display = 'none'// })// // 1. 获取三个关闭按钮// const closeBtn = document.querySelectorAll('.box1')// for (let i = 0; i < closeBtn.length; i++) {// closeBtn[i].addEventListener('click', function () {// // 关闭我的爸爸 所以只关闭当前的父元素// this.parentNode.style.display = 'none'// })// }const box1 = document.querySelectorAll('.box1')for (let i = 0; i < 3; i++) {box1[i].addEventListener('click', function () {box1[i].parentNode.style.display = 'none'})}</script>
</body></html>
08-子节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul><li></li><li></li><li></li><li></li><li></li></ul><script>const ul = document.querySelector('ul')console.log(ul.children)const li2 = document.querySelector('ul li:nth-child(2)')console.log(li2.previousElementSibling);console.log(li2.nextElementSibling);</script>
</body></html>
09-增加节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul><li>1</li></ul><script>const div = document.createElement('div')document.body.appendChild(div)console.log(div)const ul = document.querySelector('ul')// 1.创建节点const li = document.createElement('li')li.innerHTML = '我是li'// 2.追加节点 作为最后一个元素ul.appendChild(li)// 2.追加节点// insertBefore(插入的元素，放到哪个元素前面)ul.insertBefore(li, ul.children[0])</script>
</body></html>
10-克隆节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul><li>1</li><li>2</li><li>3</li></ul><script>const ul = document.querySelector('ul')ul.appendChild(ul.children[0].cloneNode(true))</script>
</body></html>
11-删除节点
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><ul><li>没有</li></ul><script>const ul = document.querySelector('ul')ul.removeChild(ul.children[0])</script>
</body></html>
12-m端时间
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div></div><script>const div = document.querySelector('div')div.addEventListener('touchstart', function () {console.log('开始摸我')})div.addEventListener('touchend', function () {console.log('结束摸我')})div.addEventListener('touchmove', function () {console.log('一直摸我')})</script>
</body></html>
13-(swiper插件的使用)
https://swiper.com.cn/
使用前阅读中文文档
需要引入link和script的src
移动端轮播图
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/swiper-bundle.min.css"><link rel="stylesheet" href="./css/swiper.min.css"><style>.box {position: relative;width: 800px;height: 300px;background-color: pink;margin: 100px auto;}html,body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.swiper {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;display: flex;justify-content: center;align-items: center;}.swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}</style>
</head><body><div class="box"><div class="swiper mySwiper"><div class="swiper-wrapper"><div class="swiper-slide">Slide 1</div><div class="swiper-slide">Slide 2</div><div class="swiper-slide">Slide 3</div><div class="swiper-slide">Slide 4</div><div class="swiper-slide">Slide 5</div><div class="swiper-slide">Slide 6</div><div class="swiper-slide">Slide 7</div><div class="swiper-slide">Slide 8</div><div class="swiper-slide">Slide 9</div></div><div class="swiper-pagination"></div></div></div><script src="./js/swiper-bundle.min.js"> </script><!-- <script src="./js/swiper.min.js"></script> --><script>var swiper = new Swiper(".mySwiper", {pagination: {el: ".swiper-pagination",},autoplay: {delay: 1000,//1秒切换一次disableOnInteraction: true,//鼠标触摸后自动继续播放},});</script>
</body></html>
游乐园项目
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>游乐园移动端</title><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入字体图标 --><link rel="stylesheet" href="./lib/iconfont/iconfont.css"><!-- 引入index.css --><link rel="stylesheet" href="./css/index.css"><link rel="stylesheet" href="./css/swiper.min.css"><style>html,body {position: relative;height: 100%;}body {background: #eee;font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size: 14px;color: #000;margin: 0;padding: 0;}.swiper-container {width: 100%;height: 100%;}.swiper-slide {text-align: center;font-size: 18px;background: #fff;/* Center slide text vertically */display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;-webkit-justify-content: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;-webkit-align-items: center;align-items: center;}.swiper-pagination-bullet {background: #fff;opacity: .8;}.swiper-pagination-bullet-active {background: pink;}</style>
</head><body><!-- 页面主体部分 --><div class="main"><!-- 轮播图模块 --><div class="banner"><!-- 轮播图模块 --><!-- Swiper --><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"><a href="#"><img src="./uploads/banner_1.png" alt=""></a></div><div class="swiper-slide"><a href="#"><img src="./uploads/banner_1.png" alt=""></a></div><div class="swiper-slide"><a href="#"><img src="./uploads/banner_1.png" alt=""></a></div><div class="swiper-slide"><a href="#"><img src="./uploads/banner_1.png" alt=""></a></div><div class="swiper-slide"><a href="#"><img src="./uploads/banner_1.png" alt=""></a></div></div><!-- Add Pagination --><div class="swiper-pagination"></div></div></div><!-- 标题模块 --><div class="title"><h4>乐园活动</h4></div><!-- 活动项目模块 --><div class="item"><!-- 图片模块 --><div class="pic"><!-- 图片 --><a href="#"><img src="./uploads/item_2.png" alt=""></a><!-- 进行模块 --><div class="status">进行中</div><!-- 收藏 --><div class="collect"><i class="iconfont icon-shoucang1"></i></div></div><!-- 信息模块 --><div class="info"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5><div class="rest"><span><i class="iconfont icon-qizhi"></i>200人报名</span><span><i class="iconfont icon-shizhong"></i>本周六开始</span></div></div></div><!-- 活动项目模块 --><div class="item"><!-- 图片模块 --><div class="pic"><!-- 图片 --><a href="#"><img src="./uploads/item_2.png" alt=""></a><!-- 进行模块 --><div class="status">进行中</div><!-- 收藏 --><div class="collect"><i class="iconfont icon-shoucang1"></i></div></div><!-- 信息模块 --><div class="info"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5><div class="rest"><span><i class="iconfont icon-qizhi"></i>200人报名</span><span><i class="iconfont icon-shizhong"></i>本周六开始</span></div></div></div><!-- 活动项目模块 --><div class="item"><!-- 图片模块 --><div class="pic"><!-- 图片 --><a href="#"><img src="./uploads/item_2.png" alt=""></a><!-- 进行模块 --><div class="status">进行中</div><!-- 收藏 --><div class="collect"><i class="iconfont icon-shoucang1"></i></div></div><!-- 信息模块 --><div class="info"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5><div class="rest"><span><i class="iconfont icon-qizhi"></i>200人报名</span><span><i class="iconfont icon-shizhong"></i>本周六开始</span></div></div></div><!-- 活动项目模块 --><div class="item"><!-- 图片模块 --><div class="pic"><!-- 图片 --><a href="#"><img src="./uploads/item_2.png" alt=""></a><!-- 进行模块 --><div class="status">进行中</div><!-- 收藏 --><div class="collect"><i class="iconfont icon-shoucang1"></i></div></div><!-- 信息模块 --><div class="info"><h5>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</h5><div class="rest"><span><i class="iconfont icon-qizhi"></i>200人报名</span><span><i class="iconfont icon-shizhong"></i>本周六开始</span></div></div></div></div><!-- 底部盒子 --><footer class="toolbar"><a href="#" class="active"><i class="iconfont icon-index-copy"></i><span>首页</span></a><a href="#"><i class="iconfont icon-youhuiquan"></i><span>卡卷</span></a><a href="#"><i class="iconfont icon-index-copy"></i><span>首页</span></a></footer><!-- 引入js文件 --><script src="./js/flexible.js"></script><script src="./js/swiper.min.js"></script><!-- Initialize Swiper --><script>var swiper = new Swiper('.swiper-container', {pagination: {el: '.swiper-pagination',},autoplay: {delay: 3000,//3秒切换一次},});</script>
</body></html>
学成在线重构
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>学车在线首页</title><link rel="stylesheet" href="./css/style.css"><style></style>
</head><body><!-- 4. box核心内容区域开始 --><div class="box w"><div class="box-hd"><h3>精品推荐</h3><a href="#">查看全部</a></div><div class="box-bd"><ul class="clearfix"></ul></div></div><script>// 1. 重构 let data = [{src: 'images/course01.png',title: 'Think PHP 5.0 博客系统实战项目演练',num: 1125},{src: 'images/course02.png',title: 'Android 网络动态图片加载实战',num: 357},{src: 'images/course03.png',title: 'Angular2 大前端商城实战项目演练',num: 22250},{src: 'images/course04.png',title: 'Android APP 实战项目演练',num: 389},{src: 'images/course05.png',title: 'UGUI 源码深度分析案例',num: 124},{src: 'images/course06.png',title: 'Kami2首页界面切换效果实战演练',num: 432},{src: 'images/course07.png',title: 'UNITY 从入门到精通实战案例',num: 888},{src: 'images/course08.png',title: 'Cocos 深度学习你不会错过的实战',num: 590},]const ul = document.querySelector('ul')// 获取完数据后添加小li// 创建lifor (let i = 0; i < data.length; i++) {const li = document.createElement('li')// 给li添加内容// 注意src后面有一个空格li.innerHTML = `<a href="#"><img src=${data[i].src} alt=""><h4>${data[i].title}</h4><div class="info"><span>高级</span> • <span>${data[i].num}</span>人在学习</div></a>`// 将创建好的li添加到ul里ul.appendChild(li)}</script>
</body></html>
innerHTML的强大之处在于它能够根据提供的字符串内容动态地构建DOM结构，无论是HTML标签还是纯文本。
相关文章：
Javascript-web API-day04
文章目录 01-实例化日期对象02-常见的日期对象方法03-年月日案例04-年月日简化05-得到时间戳06-倒计时07-关闭节点08-子节点09-增加节点10-克隆节点11-删除节点12-m端时间13-(swiper插件的使用)移动端轮播图游乐园项目 学成在线重构 01-实例化日期对象 <!DOCTYPE html> …...
等待事件 ‘latch: row cache objects‘ 说明及解决方法
早上刚来的时候，收到zabbix 数据库连接数增长的告警，同时应用负责人也说查询很慢、很卡 查看该时间段 最多的等待事件 SELECT event,COUNT(1) num FROM V$ACTIVE_SESSION_HISTORY A WHERE A.SAMPLE_TIME BETWEEN TO_DATE(2025-01-02 09:00:00, YYYY-M…...
Mac电脑python多版本环境安装与切换
我当前是python3.9.6环境，需要使用3.9.8环境，通过brew安装3.9.8版本，然后通过pyenv切换环境 步骤 1: 安装 pyenv brew install pyenv brew install pyenv-virtualenv 步骤 2: 安装 Python 3.9.8（使用 pyenv 安装指定版本的 Pyth…...
MySQL 锁那些事
Q1 : MySQL有哪些锁,功能是什么,如何项目中使用?Q2 : 行锁是如何实现的?什么情况下会使用行锁?Q3 : 四种事务隔离形式的行锁有什么不一样?读未提交读提交可重复读串行 Q4 : MySQL 的读写都是怎样加锁的?Q5 : 需要注意什么? Q1 : MySQL有哪些锁,功能是什么,如何项目中使用…...
面试手撕笔记ML/DL
数据集 数据集的批处理迭代器 Deep-ML | Batch Iterator for Dataset 实现一个批量可迭代函数，该函数在numpy数组X和可选numpy数组y中进行采样。该函数应该生成指定大小的批量。如果提供了y，则该函数应生成（X, y）对的批次&#…...
WPF使用ContentControl控件实现区域导航，并使用Prism依赖注入优化
背景：使用ContentControl控件实现区域导航是有Mvvm框架的WPF都能使用的，不限于Prism 主要是将ContenControl控件的Content内容在ViewModel中切换成不同的用户控件 下面是MainViewModel： private object body;public object Body {get { retu…...
NineData 荣获年度“创新解决方案奖”
近日，国内知名 IT 垂直媒体 & 技术社区 IT168 再次启动“技术卓越奖”评选，由行业 CIO/CTO 大咖、技术专家及 IT 媒体多方联合评审，NineData 凭借技术性能和产品创新等方面表现出色，在数据库工具领域荣获“2024 年度创新解决方…...
Windows 11 系统中npm-cache优化
在 Windows 11 系统中，C:\Users\K\AppData\Local\npm-cache 文件夹是 npm（Node Package Manager） 用于缓存已下载的包的目录。缓存的存在可以加快包的安装速度，因为当再次安装相同的包时，npm 可以直接从缓存中获取&…...
【运维工具】Ansible一款好用的自动化工具
Ansible一款好用的自动化工具 概述一、基本概念与特点二、核心组件三、主要功能与应用场景四、优缺点 如何使用一、安装Ansible二、配置Ansible三、使用Ansible四、注意事项 Playbook语法详解一、YAML文件的基本结构二、Playbook的主要组成部分三、Playbook示例四、注意事项 概…...
4.Web安全——JavaScript基础
一、JavaScript是什么？ JavaScript 是一种高级的、解释型的编程语言，广泛应用于网页开发和各种软件应用程序中。 二、为什么要学习JavaScript XSS（跨站脚本攻击）防范 XSS 是一种常见的 Web 安全漏洞，攻击者将恶意脚…...
mysql删除无用用户
1、删除不用的账户 (1) 查看当前已存在账户 mysql> select user,host,password from mysql.user; 或下面的命令 #mysql> sELECT DISTINCT CONCAT(User: ,user,,host,;) AS query FROM mysql.user; --------------------------------------- | query …...
2025元旦源码免费送
我们常常在当下感到时间慢，觉得未来遥远，但一旦回头看，时间已经悄然流逝。对于未来，尽管如此，也应该保持一种从容的态度，相信未来仍有许多可能性等待着我们。 免费获取源码。 更多内容敬请期待。如有需要可…...
静态库封装之ComFile类
ComFile.h /* author:EricsT data:20241024 version:V1.0 history:author data version contentEricsT 20241024 V1.0 新增ComFile类[common、FILE以及stream部分] */#pragma once#include <string> #include <fstream> using namespace std;class ComFile { publi…...
概率论与数理统计
概率论占比更多，三分之二左右 数理统计会少一些 事件之间的概率 ab互斥，不是ab独立 古典概型吃高中基础，考的不会很多 条件概率公式，要记 公式不要全记，很多有名称的公式是通过基础公式转换而来的 目的在于解决一…...
鸿蒙HarmonyOS开发：基于Swiper组件和自定义指示器实现多图片进度条轮播功能
文章目录 一、概述1、场景介绍2、技术选型 二、实现方案1、图片区域实现2、底部导航点设计3、手动切换 三、所有代码1、设置沉浸式2、外层Tabs效果3、ImageSwiper组件 四、效果展示 一、概述 在短视频平台上，经常可以见到多图片合集。它的特点是：由多张…...
django --递归查询评论
表数据 树状结构 action(methods(GET, ), detailFalse) def get_info_pinglun(self, request, *args, **kwargs) -> Response:根据评论id查所有回复params wenxian_pinglun_id --> 评论id;wenxian_pinglun_id self.request.GET.get(wenxian_pinglun_id)results se…...
kafka怎么保证顺序消费？
kafka怎么保证顺序消费？ 1. 分区内的顺序保证2. 并发消费3. 实现顺序消费的策略4. 注意事项 kafka创建 topic 的时候没有指定分区数量，那么默认只会有一个分区。如果你想要创建一个具有多个分区的 topic，你可以在创建 topic 的命令中指定 --p…...
springboot原生socket通讯教程
需求背景 最近需要对接一些硬件设备，他们选择了socket通讯，并且使用的是私有化协议加密通讯。这种情况下适合原生的socket加解密解析，不适合NettySocket，这在开发中增加了难度。所有的代码都要手动去敲。如果你的只想通过socket传输一些数据，而且都是json的数据，例如聊天…...
革新排版机产线：一体式IO模块引领自动化高效控制新时代
在瞬息万变的制造业浪潮中，自动化与智能化已成为推动产业升级的关键力量。特别是在印刷行业，排版机的效率与精度直接关系到产品的质量与市场竞争力。近年来，随着技术的不断革新，明达技术MR20一体式IO模块凭借其高度集成、灵活配置…...
《深度学习梯度消失问题：原因与解决之道》
在深度学习的训练过程中，梯度消失是一个常见且棘手的问题，它会严重影响模型的训练效果和性能。以下是对该问题的原因分析与解决办法。 梯度消失问题的原因 首先是激活函数选择不当。像Sigmoid和Tanh这类传统激活函数，在输入值较大或较小时&…...
IP-MS常见问题（一）
用于IP-MS实验的样品，需要多少样品量？ 建议使用约2107数量的细胞（约5 mg蛋白）进行IP实验。 其他类型的IP起始样品，如组织、细菌等可根据蛋白含量进行换算。 经过IP实验步骤或纯化富集的蛋白通常不超过10 μg…...
四种线程池的创建及任务提交
1. 线程池概述 1.1 线程池的定义 线程池是管理和控制线程使用的一种手段。它通过提前创建一定数量的线程，并将任务提交给这些线程执行，来实现资源的合理分配和任务的高效处理。 关键点： 线程复用：线程池在任务执行完毕后&#…...
【优选算法】查找总价格为目标值的两个商品
链接：LCR 179. 查找总价格为目标值的两个商品 - 力扣（LeetCode） 解法：利用单调性，使用双指针算法解决问题 1.先从小到大排序 2. sum > t : right--; sum < t : left; sum t : return class Solution {public…...
从零开始学架构——互联网架构的演进
1 技术演进 1.1 技术演进的动力 对于新技术，我们应该站在行业的角度上思考，哪些技术我们要采取，哪些技术我们不能用，投入成本过大会不会导致满盘皆输？市场、技术、管理三者组成的业务发展铁三角，任何一个…...
Linux 系统常见问题
SSH问题 SSH连接服务器时报错： ssh_exchange_identification: read: Connection reset by peer 报错信息： ssh_exchange_identification: read: Connection reset by peer可以通过ssh -p root -v查看连接时详情 解决方法： vi /etc/host…...
工厂模式与抽象工厂模式在Unity中的实际应用案例
一、实验目的 实践工厂模式和抽象工厂模式的实际应用。 创建一个小型的游戏场景，通过应用这些设计模式提升游戏的趣味性和可扩展性。 掌握在复杂场景中管理和使用不同类型的对象。 比较在实际游戏开发中不同设计模式的实际效果和应用场景。 学习如何进行简单的性…...
AI定义汽车/跨域融合/整车智能，汽车智能化2.0时代新机会来了
汽车智能化2.0，产业正在发生深度变革。 一方面，AI大模型开始在多个域同步赋能智能汽车，从智能座舱到智能驾驶，再到底盘域，AI大模型正在快速推动汽车变革为超级智能体，AI定义汽车时代开始来临。 另一方面&…...
QT----------多媒体
实现思路 多媒体模块功能概述： QT 的多媒体模块提供了丰富的功能，包括音频播放、录制、视频播放和摄像头操作等。 播放音频： 使用 QMediaPlayer 播放完整的音频文件。使用 QSoundEffect 播放简短的音效文件。 录制音频： 使用 QMe…...
[ubuntu-22.04]ubuntu不识别rtl8153 usb转网口
问题描述 ubuntu22.04插入rtl8153 usb转网口不识别 解决方案 安装依赖包 sudo apt-get install libelf-dev build-essential linux-headers-uname -r sudo apt-get install gcc-12 下载源码 Realtek USB FE / GBE / 2.5G / 5G Ethernet Family Controller Softwarehttps:/…...
洛谷P1525 [NOIP2010 提高组] 关押罪犯（种子并查集基础）
题目链接：P1525 [NOIP2010 提高组] 关押罪犯 - 洛谷 | 计算机科学教育新生态 题目难度：普及+/提高 题目描述： S 城现有两座监狱，一共关押着 N 名罪犯，编号分别为 1∼N，有m对罪犯，每对之间有仇恨值，问如何分配罪犯使得现 Z 市长要看到其中最大的矛盾值最小。 输入格…...
Android笔试面试题AI答之Android基础（11）
Android入门请看《Android应用开发项目式教程》，视频、源码、答疑，手把手教 文章目录 1.Android的权限有哪些？**1. 普通权限****常见普通权限** **2. 危险权限****权限分组****常见危险权限组及权限** **3. 特殊权限****常见特殊权限** **4. …...
【智行安全】基于Synaptics SL1680的AI疲劳驾驶检测方案
随著车载技术的快速进步，驾驶安全越来越受到重视，而疲劳驾驶是造成交通事故的重要原因之一。传统的驾驶监控技术因精度不足或反应迟缓，无法满足实时监测需求。因此，结合人工智能技术的疲劳驾驶检测系统成为行业新方向，…...
多分类的损失函数
在多分类任务中，常用的损失函数能够衡量模型输出的类别分布与目标类别之间的差异，帮助模型学习更准确的分类能力。以下是多分类任务中常用的损失函数： 1. 交叉熵损失（Cross-Entropy Loss） 公式: CrossEntropyLoss = − 1 N ∑ i =...
探索数据之美，Plotly引领可视化新风尚
在数据如潮的今天，如何精准捕捉信息的脉搏，让数据说话？Plotly，这款强大的数据可视化工具，正以其卓越的性能和丰富的功能，成为数据分析师、科学家及工程师们的得力助手。 Plotly不仅仅是一个绘图库…...
青少年编程与数学 02-006 前端开发框架VUE 02课题、创建工程
青少年编程与数学 02-006 前端开发框架VUE 02课题、创建工程 一、开发环境（一）WebStorm安装WebStorm配置WebStorm安装中文语言包安装 Translation插件 （二）Node.jsWindows系统安装Node.jsLinux系统安装Node.jsNode.js与Vue.js的关…...
高并发场景下的秒杀系统架构设计与实现
引言 秒杀系统是一种高并发场景的典型应用，广泛存在于电商平台、抢票系统和促销活动中。秒杀活动的特点是短时间内吸引大量用户同时访问并尝试抢购商品，这对系统的高并发处理能力、稳定性和用户体验提出了极高的要求。 在秒杀系统中，常见的…...
局域网中单台交换机VLAN应用
网络拓扑 其中交换机接口类型都为access接口。 Ethernet 0/0/1 VLAN ID为10 Ethernet 0/0/2 VLAN ID为10 Ethernet 0/0/5 VLAN ID为20 Ethernet 0/0/6 VLAN ID为20 Host-1 ip为192.168.64.11/24 Host-2 ip为192.168.64.12/24 Host-3 ip为192.168.64.21/24 Host-4 ip为192.168…...
UNI-APP_i18n国际化引入
官方文档：https://uniapp.dcloud.net.cn/tutorial/i18n.html vue2中使用 1. 新建文件 locale/index.js import en from ./en.json import zhHans from ./zh-Hans.json import zhHant from ./zh-Hant.json const messages {en,zh-Hans: zhHans,zh-Hant: zhHant }…...
纯血鸿蒙ArkUI选项卡布局详解
当页面信息较多的时候，为了让用户能够聚焦于当前显示的内容，需要对页面的内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内实现快速的视图内容切换，一方面提升查找信息的效率，另一方面精简用户单词获取到的…...
从0开始的opencv之旅（1）cv::Mat的使用
目录 Mat 存储方法 创建一个指定像素方式的图像。 尽管我们完全可以把cv::Mat当作一个黑盒，但是笔者的建议是仍然要深入理解和学习cv::Mat自身的构造逻辑和存储原理，这样在查找问题，或者是遇到一些奇奇怪怪的图像显示问题的时候能够快速的想…...
uniapp 微信小程序开发使用高德地图、腾讯地图
一、高德地图 1.注册高德地图开放平台账号 （1）创建应用 这个key 第3步骤，配置到项目中locationGps.js 2.下载高德地图微信小程序插件 （1）下载地址 高德地图API | 微信小程序插件 （2）引入项目…...
Activation Functions
Chapter4：Activation Functions 声明：本篇博客笔记来源于《Neural Networks from scratch in Python》，作者的youtube 其实关于神经网络的入门博主已经写过几篇了，这里就不再赘述，附上链接。 1.一文窥见神经网络 2.神经…...
【TextIn—智能文档解析与DocFlow票据AI自动化处理：赋能企业文档数字化管理与数据治理的双重利器】
TextIn—智能文档解析与票据AI自动化处理：赋能企业文档数字化管理与数据治理的双重利器 在数据驱动的时代，企业面临的挑战不仅在于海量数据的整理和响应速度的提高，更在于如何有效管理和利用这些日益增长的海量信息。尤其是在信息日趋多样…...
Quartus In-System Sources and Probes Editor 的使用说明
文章目录 前言使用说明参考资料 前言 Quartus 提供了 In-System Sources and Probes Editor 调试工具，通过 JTAG 接口使用该工具可以驱动和采样内部节点的逻辑值。即通过 Sources 功能来驱动 FPGA 内部信号，通过 Probes 功能来探测内部节点的逻辑值。在…...
【视觉SLAM:八、后端Ⅱ】
视觉SLAM后端的核心任务是估计相机的轨迹和场景的三维结构，这需要解决非线性优化问题。为了保证效率和精度，后端主要依赖以下两种方法：滑动窗口法（基于局部优化的策略）和位姿图优化（基于全局优化的策略&…...
【大模型实战篇】LLaMA Factory微调ChatGLM-4-9B模型
1. 背景介绍 虽然现在大模型微调的文章很多，但纸上得来终觉浅，大模型微调的体感还是需要自己亲自上手实操过，才能有一些自己的感悟和直觉。这次我们选择使用llama_factory来微调chatglm-4-9B大模型。 之前微调我们是用两块3090GPU显卡&…...
多个DataV遍历生成
DataV是数据可视化工具 与Echart类似 相对Echart图标边框 装饰可选官网DataV 安装 npm install kjgl77/datav-vue3main.ts import DataVVue3 from kjgl77/datav-vue3 app.use(DataVVue3)多个DataV遍历生成 Vue3viteDataV为例:<template><div w50rem h25rem flex&qu…...
【JavaWeb后端学习笔记】MySQL的常用函数（字符串函数，数值函数，日期函数，流程函数）
MySQL函数 1、字符串函数2、数值函数3、日期函数4、流程函数 1、字符串函数 函数说明concat(s1, s2, …, sn)字符串拼接，将 s1, s2, …, sn 拼接成一个字符串lower(str)将字符串 str 全部转为小写upper(str)将字符串 str 全部转为大写lpad(str, n, pad)左填充&…...
开源AI智能名片2+1链动模式O2O商城小程序在流量留存与转化中的深度应用与优化策略
摘要 在数字化时代，企业面临的市场竞争日益激烈，传统的营销手段已难以满足当前市场的多样化需求。开源AI智能名片21链动模式O2O商城小程序作为一种创新的数字化营销工具，凭借其开源特性、AI智能名片功能、21链动模式以及O2O商城小程序的优势…...
API多并发识别、C#文字识别
在当今数字化转型的浪潮中，信息处理的速度和准确性成为了企业在市场中立足的关键因素之一。特别是在大数据时代，海量的信息需要被快速、精确的解析和利用，因此，这正是文字识别技术大放异彩的舞台。翔云平台针对市场需求࿰…...