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

Javascript-web API-day02

news 来源：原创 2025/6/10 4:32:25

在这里插入图片描述
在这里插入图片描述

文章目录

    • 01-事件监听
    • 02-点击关闭广告
    • 03-随机点名案例
    • 04-鼠标经过或离开事件
    • 05-可点击的轮播图
    • 06-小米搜索框
    • 07-键盘类型事件
    • 08-键盘事件-发布评论案例
    • 09-focus选择器
    • 10-评论回车发布
    • 11-事件对象
    • 12-trim方法
    • 13-环境对象
    • 14-回调函数
    • 15-tab栏切换

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><button>点击</button><script>// 事件源const btn = document.querySelector('button')// 时间侦听btn.addEventListener('click', function () {alert('弹窗')})</script>
</body></html>

在这里插入图片描述

02-点击关闭广告

<!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><script>// 1. 获取事件源const box1 = document.querySelector('.box1')//  关闭的是大盒子const box = document.querySelector('.box')// 2. 事件侦听box1.addEventListener('click', function () {box.style.display = 'none'})</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>* {margin: 0;padding: 0;}h2 {text-align: center;}.box {width: 600px;margin: 50px auto;display: flex;font-size: 25px;line-height: 40px;}.qs {width: 450px;height: 40px;color: red;}.btns {text-align: center;}.btns button {width: 120px;height: 35px;margin: 0 50px;}</style>
</head>
<!-- 业务分析:1点击开始按钮随机抽取数组的一个数据，放到页面中2点击结束按钮删除数组当前抽取的一个数据3当抽取到最后一个数据的时候，两个按钮同时禁用(写点开始里面，只剩最后一个数据不用抽了)核心:利用定时器快速展示，停止定时器结束展示 --><body><h2>随机点名</h2><div class="box"><span>名字是：</span><div class="qs">这里显示姓名</div></div><div class="btns"><button class="start">开始</button><button class="end">结束</button></div><script>// 数据数组const arr = ['马超', '黄忠', '赵云', '关羽', '张飞']// 业务1：开始按钮模块// 定时器编号设置为全局变量let n = 0// 数组下标设置为全局变量let random = 0const start = document.querySelector('.start')const qs = document.querySelector('.qs')start.addEventListener('click', function () {n = setInterval(function () {random = Math.floor(Math.random() * arr.length)qs.innerHTML = `${arr[random]}`}, 50)// 如果数组只剩一个元素：把两个按钮都禁用if (arr.length === 1) {start.disabled = trueend.disabled = true}})// 业务2：结束模块const end = document.querySelector('.end')end.addEventListener('click', function () {clearInterval(n)arr.splice(random, 1)})</script>
</body></html>

在这里插入图片描述

04-鼠标经过或离开事件

<!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>div {width: 200px;height: 200px;background-color: pink;}</style>
</head><body><div></div><script>const div = document.querySelector('div')// 鼠标经过div.addEventListener('mouseenter', function () {console.log(`轻轻的我来了`)})// 鼠标离开div.addEventListener('mouseleave', function () {console.log(`轻轻的我走了`)})</script>
</body></html>

在这里插入图片描述

05-可点击的轮播图

<!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><style>* {box-sizing: border-box;}.slider {width: 560px;height: 400px;overflow: hidden;}.slider-wrapper {width: 100%;height: 320px;}.slider-wrapper img {width: 100%;height: 100%;display: block;}.slider-footer {height: 80px;background-color: rgb(100, 67, 68);padding: 12px 12px 0 12px;position: relative;}.slider-footer .toggle {position: absolute;right: 0;top: 12px;display: flex;}.slider-footer .toggle button {margin-right: 12px;width: 28px;height: 28px;appearance: none;border: none;background: rgba(255, 255, 255, 0.1);color: #fff;border-radius: 4px;cursor: pointer;}.slider-footer .toggle button:hover {background: rgba(255, 255, 255, 0.2);}.slider-footer p {margin: 0;color: #fff;font-size: 18px;margin-bottom: 10px;}.slider-indicator {margin: 0;padding: 0;list-style: none;display: flex;align-items: center;}.slider-indicator li {width: 8px;height: 8px;margin: 4px;border-radius: 50%;background: #fff;opacity: 0.4;cursor: pointer;}.slider-indicator li.active {width: 12px;height: 12px;opacity: 1;}</style>
</head><body><div class="slider"><div class="slider-wrapper"><img src="./images/slider01.jpg" alt="" /></div><div class="slider-footer"><p>对人类来说会不会太超前了？</p><ul class="slider-indicator"><li class="active"></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><div class="toggle"><button class="prev">&lt;</button><button class="next">&gt;</button></div></div></div><script>// 1. 初始数据const sliderData = [{ url: './images/slider01.jpg', title: '对人类来说会不会太超前了？', color: 'rgb(100, 67, 68)' },{ url: './images/slider02.jpg', title: '开启剑与雪的黑暗传说！', color: 'rgb(43, 35, 26)' },{ url: './images/slider03.jpg', title: '真正的jo厨出现了！', color: 'rgb(36, 31, 33)' },{ url: './images/slider04.jpg', title: '李玉刚：让世界通过B站看到东方大国文化', color: 'rgb(139, 98, 66)' },{ url: './images/slider05.jpg', title: '快来分享你的寒假日常吧~', color: 'rgb(67, 90, 92)' },{ url: './images/slider06.jpg', title: '哔哩哔哩小年YEAH', color: 'rgb(166, 131, 143)' },{ url: './images/slider07.jpg', title: '一站式解决你的电脑配置问题！！！', color: 'rgb(53, 29, 25)' },{ url: './images/slider08.jpg', title: '谁不想和小猫咪贴贴呢！', color: 'rgb(99, 72, 114)' },]//右侧按钮服务：点击图变 字变 颜色变 小圆点变 点击到最后一个之后从新开始let i = 0const next = document.querySelector('.next')const img = document.querySelector('.slider-wrapper img')const p = document.querySelector('.slider-footer p')next.addEventListener('click', function () {i++if (i >= sliderData.length) {i = 0}toggle()})//左侧按钮服务：点击图变 字变 颜色变 小圆点变 点击到最后一个之后从新开始const prev = document.querySelector('.prev')prev.addEventListener('click', function () {i--if (i < 0) {i = sliderData.length - 1}toggle()})// 定时模块let timer = setInterval(function () {next.click()}, 1000)// 鼠标经过功能：关闭定时器const slider = document.querySelector('.slider')slider.addEventListener('mouseenter', function () {clearInterval(timer)})// 鼠标离开：打开定时器slider.addEventListener('mouseleave', function () {clearInterval(timer)timer = setInterval(function () {next.click()}, 1000)})// 把重复代码用函数封装起来function toggle() {img.src = sliderData[i].urlp.innerHTML = sliderData[i].titledocument.querySelector('.slider-footer').style.backgroundColor = sliderData[i].colordocument.querySelector('.slider-indicator .active').classList.remove('active')document.querySelector(`.slider-footer li:nth-child(${i + 1})`).classList.add('active')}</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>* {margin: 0;padding: 0;box-sizing: border-box;}ul {display: none;list-style: none;}.mi {position: relative;width: 223px;margin: 100px auto;}.mi input {width: 223px;height: 48px;padding: 0 10px;font-size: 14px;line-height: 48px;border: 1px solid #e0e0e0;outline: none;}.mi .search {border: 1px solid #ff6700;}.result-list {position: absolute;left: 0;top: 48px;width: 223px;border: 1px solid #ff6700;border-top: 0;background: #fff;}.result-list a {display: block;padding: 6px 15px;font-size: 12px;color: #424242;text-decoration: none;}.result-list a:hover {background-color: #eee;}</style></head><body><div class="mi"><input type="search" placeholder="小米笔记本"><ul class="result-list"><li><a href="#">全部商品</a></li><li><a href="#">小米11</a></li><li><a href="#">小米10S</a></li><li><a href="#">小米笔记本</a></li><li><a href="#">小米手机</a></li><li><a href="#">黑鲨4</a></li><li><a href="#">空调</a></li></ul></div><script>const input = document.querySelector('input')const ul = document.querySelector('ul')// 焦点放置：显示下拉菜单+搜索框变颜色input.addEventListener('focus', function () {ul.style.display = 'block'input.classList.add('search')})// 焦点离开：下拉菜单不显示input.addEventListener('blur', function () {ul.style.display = 'none'input.classList.remove('search')})</script>
</body></html>

在这里插入图片描述
在这里插入图片描述

07-键盘类型事件

![<!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><input type="text"><script>const input = document.querySelector('input')input.addEventListener('keydown', function () {console.log('jianpan')})input.addEventListener('keyup', function () {console.log('jianpanuo')})</script>
</body></html>](https://i-blog.csdnimg.cn/direct/d238d77d9d294f578d287308f6cc7d65.png)

在这里插入图片描述

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><input type="text" name="" id=""><script>const input = document.querySelector('input')input.addEventListener('input', function () {console.log(input.value)})</script>
</body></html>

在这里插入图片描述

09-focus选择器

<!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>input {width: 220px;transition: all .3s;}input:focus {width: 300px;}</style>
</head><body><input type="text">
</body></html>

在这里插入图片描述
在这里插入图片描述

10-评论回车发布

<!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><style>.wrapper {min-width: 400px;max-width: 800px;display: flex;justify-content: flex-end;}.avatar {width: 48px;height: 48px;border-radius: 50%;overflow: hidden;background: url(./images/avatar.jpg) no-repeat center / cover;margin-right: 20px;}.wrapper textarea {outline: none;border-color: transparent;resize: none;background: #f5f5f5;border-radius: 4px;flex: 1;padding: 10px;transition: all 0.5s;height: 30px;}.wrapper textarea:focus {border-color: #e4e4e4;background: #fff;height: 50px;}.wrapper button {background: #00aeec;color: #fff;border: none;border-radius: 4px;margin-left: 10px;width: 70px;cursor: pointer;}.wrapper .total {margin-right: 80px;color: #999;margin-top: 5px;opacity: 0;transition: all 0.5s;}.list {min-width: 400px;max-width: 800px;display: flex;}.list .item {width: 100%;display: flex;}.list .item .info {flex: 1;border-bottom: 1px dashed #e4e4e4;padding-bottom: 10px;}.list .item p {margin: 0;}.list .item .name {color: #FB7299;font-size: 14px;font-weight: bold;}.list .item .text {color: #333;padding: 10px 0;}.list .item .time {color: #999;font-size: 12px;}</style>
</head><body><div class="wrapper"><i class="avatar"></i><textarea id="tx" placeholder="发一条友善的评论" rows="2" maxlength="200"></textarea><button>发布</button></div><div class="wrapper"><span class="total">0/200字</span></div><div class="list"><div class="item" style="display: none;"><i class="avatar"></i><div class="info"><p class="name">清风徐来</p><p class="text">大家都辛苦啦，感谢各位大大的努力，能圆满完成真是太好了[笑哭][支持]</p><p class="time">2022-10-10 20:29:21</p></div></div></div><script>const textarea = document.querySelector('#tx')const total = document.querySelector('.total')const item = document.querySelector('.item')const text = document.querySelector('.text')// 文本域获得焦点 字数显示textarea.addEventListener('focus', function () {total.style.opacity = 1// total.value = `${textarea.value.length}/200字`})// 文本域失去焦点 字数隐藏textarea.addEventListener('blur', function () {total.style.opacity = 0})// 检测光标输入事件textarea.addEventListener('input', function () {// console.log(textarea.value.length)total.innerHTML = `${textarea.value.length}/200字`})// 按下回车发布评论textarea.addEventListener('keyup', function (e) {// 只有按下的是回车键，才会触发if (e.key === 'Enter') {if (textarea.value.trim() !== '') {// 这个if等价于if(textarea.value.trim())// 消除空字符串的bugitem.style.display = 'block'text.innerHTML = textarea.value}// 回车完成之后清空文本域textarea.value = ''// 回车完成之后清字数统计 复原total.innerHTML = '0/200字'}})</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><button>点击</button><input type="text"><script>// const btn = document.querySelector('button')// btn.addEventListener('click', function (e) {//   console.log(e)// })const input = document.querySelector('input')input.addEventListener('keyup', function (e) {console.log(e.key)if (e.key === 'Enter') {console.log('回车')}})</script>
</body></html>

在这里插入图片描述

12-trim方法

<!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 str = '       im a teachr   'console.log(str.trim())// 去除字符串左右空格</script>
</body></html>

在这里插入图片描述

13-环境对象

<!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><!-- 环境对象this:代表着当前函数运行时所处的环境 --><!-- this指向：谁调用this 就指向谁 --><button>按钮</button><script>function fn() {console.log(this)// 这个指向windows}const button = document.querySelector('button')button.addEventListener('click', function () {console.log(this)// 这个指向buttonbutton.style.color = 'red'// 等价于:this.style.color = 'red'})</script>
</body></html>

在这里插入图片描述

在这里插入图片描述

14-回调函数

<!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><!-- 函数A作为参数传给函数B  A就叫回调函数 --><script>function fn() {console.log(101)}setInterval(fn, 1000)// fn就是回调函数</script>
</body></html>

在这里插入图片描述

15-tab栏切换

<!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>tab栏切换</title><style>* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font-size: 24px;font-weight: normal;margin-left: 20px;}.tab-nav ul {list-style: none;display: flex;justify-content: flex-end;}.tab-nav ul li {margin: 0 20px;font-size: 14px;}.tab-nav ul li a {text-decoration: none;border-bottom: 2px solid transparent;color: #333;}.tab-nav ul li a.active {border-color: #e1251b;color: #e1251b;}.tab-content {padding: 0 16px;}.tab-content .item {display: none;}.tab-content .item.active {display: block;}</style>
</head><body><div class="tab"><div class="tab-nav"><h3>每日特价</h3><ul><li><a class="active" href="javascript:;">精选</a></li><li><a href="javascript:;">美食</a></li><li><a href="javascript:;">百货</a></li><li><a href="javascript:;">个护</a></li><li><a href="javascript:;">预告</a></li></ul></div><div class="tab-content"><div class="item active"><img src="./images/tab00.png" alt="" /></div><div class="item"><img src="./images/tab01.png" alt="" /></div><div class="item"><img src="./images/tab02.png" alt="" /></div><div class="item"><img src="./images/tab03.png" alt="" /></div><div class="item"><img src="./images/tab04.png" alt="" /></div></div></div><script>const as = document.querySelectorAll('.tab-nav li a')for (let i = 0; i < as.length; i++) {as[i].addEventListener('mouseenter', function () {document.querySelector('.tab-nav li .active').classList.remove('active')this.classList.add('active')document.querySelector('.tab-content .active').classList.remove('active')document.querySelector(`.tab-content .item:nth-child(${i + 1})`).classList.add('active')})}</script>
</body></html>

在这里插入图片描述

相关文章：

Javascript-web API-day02

文章目录 01-事件监听02-点击关闭广告03-随机点名案例04-鼠标经过或离开事件05-可点击的轮播图06-小米搜索框07-键盘类型事件08-键盘事件-发布评论案例09-focus选择器10-评论回车发布11-事件对象12-trim方法13-环境对象14-回调函数15-tab栏切换 01-事件监听 <!DOCTYPE html…...

编程日记 2025/6/2 17:13:18

Python爬虫之代理的设置

【1】urllib中使用公开代理 import urllib.requesturl http://www.baidu.com/s?wdipheaders {User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36 }# 请求对象的定制 request urllib.req…...

编程日记 2025/6/1 21:37:05

Qt：QMetaObject::connectSlotsByName实现信号槽自动关联

简介 在Qt中&#xff0c;QMetaObject::connectSlotsByName 是一个便利的方法&#xff0c;它可以根据对象的对象名&#xff08;objectName&#xff09;自动将信号和槽连接起来。但是&#xff0c;要使用这个方法&#xff0c;必须确保&#xff1a; 1 控件&#xff08;如按钮&…...

编程日记 2025/6/1 21:37:03

芝法酱学习笔记（2.1）——sql性能优化1

一、前言 做程序员这行&#xff0c;相信大家都会接触到性能优化这个概念。并且多数程序员&#xff0c;为自己能参与到性能优化的工作而感到自豪。 在普通应用系统的业务开发中&#xff0c;程序的性能瓶颈往往在数据库查询的IO上&#xff0c;所以优化数据库查询则是重中之重的工…...

编程日记 2025/6/4 9:31:58

【Mysql】Java的JDBC编程

本节目标 数据库驱动 JDBC的概念及作用 掌握JDBC的工作原理 掌握JDBC中几个常用接口和类 掌握基于数据库的应用程序开发流程 一. 数据库编程的必备条件 编程语言&#xff0c;如Java&#xff0c;C、C、Python等 数据库&#xff0c;如Oracle&#xff0c;MySQL&#xff0c;S…...

编程日记 2025/6/3 16:51:21

PHPUnit使用指南：编写高效的单元测试

PHPUnit使用指南&#xff1a;编写高效的单元测试 单元测试是软件开发中不可或缺的一部分&#xff0c;它能够帮助开发者确保代码的正确性和稳定性。PHPUnit是PHP中最流行的单元测试框架之一&#xff0c;提供了一套强大的工具和功能来编写和运行测试。本文将详细介绍如何使用PHP…...

编程日记 2025/6/3 15:47:34

二、HTML5

一、HTML5简介 1、什么是HTML5 HTML5 是新一代的 HTML 标准&#xff0c;2014年10月由万维网联盟&#xff08;W3C&#xff09;完成标准制定。 官网地址&#xff1a; W3C 提供&#xff1a; https://www.w3.org/TR/html/index.html WHATW…...

编程日记 2025/6/2 22:35:21

授权模型MAC

MAC&#xff08;Mandatory Access Control&#xff09;是一种授权模型&#xff0c;用于实现对系统资源访问的强制控制。在MAC模型中&#xff0c;授权是基于预先定义的安全策略&#xff0c;且该策略由系统管理员来配置和管理。 在MAC模型中&#xff0c;每个用户和每个资源都被赋…...

编程日记 2025/6/1 7:11:01

GaussDB数据库迁移方案介绍

云数据库GaussDB提供了多种数据迁移方案&#xff0c;可满足从MySQL数据库、Oracle数据库、GaussDB数据库、PostgreSQL数据库、DB2 for LUW、RDS for SQL Server、Microsoft SQL Server数据库到云数据库GaussDB的迁移。 数据迁移工具有DRS、DAS和gs_loader。推荐使用DRS&#x…...

编程日记 2025/6/4 10:23:40

web3跨链桥协议-Nomad

项目介绍 Nomad是一个乐观跨链互操作协议。通过Nomad协议&#xff0c;Dapp能够在不同区块链间发送数据&#xff08;包括rollups&#xff09;&#xff0c;Dapp通过Nomad的合约和链下的代理对跨链数据、消息进行验证、传输。其安全通过乐观验证机制和欺诈证明制约验证者实现&…...

编程日记 2025/6/3 7:45:53

白话java设计模式

创建模式 单例模式&#xff08;Singleton Pattern&#xff09;&#xff1a; 就是一次创建多次使用&#xff0c;它的对象不会重复创建&#xff0c;可以全局来共享状态。 工厂模式&#xff08;Factory Method Pattern&#xff09;&#xff1a; 可以通过接口来进行实例化创建&a…...

编程日记 2025/5/31 19:01:45

代码的注释

代码注释是程序开发中至关重要的一部分&#xff0c;良好的注释能够大大提升代码的可读性、可维护性和团队协作效率。注释帮助开发人员理解代码的逻辑、目的和背后的设计思想&#xff0c;尤其是在面对复杂的业务逻辑或算法时&#xff0c;注释可以帮助未来的开发人员快速理解并有…...

编程日记 2025/6/4 9:51:22

Java中的Consumer接口应该如何使用（通俗易懂图解）

应用场景&#xff1a; 第一次程序员A写好了个基础的遍历方法&#xff1a; public class Demo1 {public static void main(String[] args) {//假设main方法为程序员B写的,此时需要去调用A写好的一个遍历方法//1.如果此时B突然发现想将字符串以小写的形式打印出来&#xff0c;则…...

编程日记 2025/6/2 14:59:27

数据库设计的基础与进阶：1NF、2NF、3NF及BCNF解析

目录 什么是数据库范式&#xff1f; 1. 第一范式&#xff08;1NF&#xff09; 2. 第二范式&#xff08;2NF&#xff09; 3. 第三范式&#xff08;3NF&#xff09; 4. 博茨-科德范式&#xff08;BCNF&#xff09; 总结 在数据库设计中&#xff0c;范式是为了确保数据存储结…...

编程日记 2025/6/3 1:47:36

ARM Cortex-A7 MPCore 架构

1、Cortex-A7 MPCore 简介 Cortex-A7 MPcore 处理器支持 1~4 核，通常是和 Cortex-A15 组成 big.LITTLE 架构的， Cortex-A15 作为大核负责高性能运算，比如玩游戏啥的， Cortex-A7 负责普通应用，因为 CortexA7 省电。 Cortex-A7 本身性能也不弱，不要看它叫做 Cortex-A7 但是…...

编程日记 2025/6/4 3:43:17

【操作系统】数据集合集！

本文将为您介绍经典、热门的数据集&#xff0c;希望对您在选择适合的数据集时有所帮助。 1 HarmonyOS 更新时间&#xff1a;2024-07-20 访问地址: GitHub 描述&#xff1a; 是首个基于微内核的全场景分布式操作系统&#xff0c;是华为自主研发的操作系统&#xff0c;华为将率…...

编程日记 2025/6/4 16:44:55

原生js图片预览

下面的图片预览是从一个JSON文件中加载图片列表&#xff0c;并且支持点击缩略图预览大图&#xff0c;还可以使用鼠标滚轮进行图片缩放。接下来了给大家把html、css、js一个一个的讲解一下 首先是html <div class"container"></div><div id"imag…...

编程日记 2025/6/4 14:43:37

【系统】Mac crontab 无法退出编辑模式问题

【系统】Mac crontab 无法退出编辑模式问题 背景一、问题回答1.定位原因&#xff1a;2.确认编辑器类型3.确保编辑器进入正确3.1 确认是否有crontab调度任务3.2 进入编辑器并确保编辑器正常3.3 保存操作 4.确认crontab任务存在5.确保脚本的可执行性和正确性 二、后续 背景 之前…...

编程日记 2025/6/1 7:10:41

【进程篇】04.进程的状态与优先级

一、进程的状态 1.1 进程的状态 1.1.1 并行与并发 • 并行: 多个进程在多个CPU下分别&#xff0c;同时进行运行 • 并发: 多个进程在一个CPU下采用进程切换的方式&#xff0c;在一个时间片内&#xff0c;让多个进程都得以推进 1.1.2 时间片的概念 LInux/windows这些民用级别…...

编程日记 2025/6/3 10:11:14

linux下蓝牙调试工具hcitool的使用

hcitool 是一个用于蓝牙设备管理的命令行工具&#xff0c;主要用于查看和管理蓝牙设备。以下是一些常见的用法和示例&#xff1a; 1. 查看本地蓝牙适配器信息 使用 hcitool dev 命令可以查看本地蓝牙适配器的信息。 hcitool dev示例输出&#xff1a; Devices:hci0 00:11:22…...

编程日记 2025/6/3 4:02:04

【RAG实战】Prompting vs. RAG vs. Finetuning: 如何选择LLM应用选择最佳方案

在构建基于大型语言模型&#xff08;LLM&#xff09;的应用时&#xff0c;通常不可能立即使用模型而无需任何调整。为了保持高实用性&#xff0c;我们可以选择以下几种方法之一&#xff1a; Prompt Engineering&#xff08;提示工程&#xff09;Fine-tuning&#xff08;微调&a…...

编程日记 2025/6/3 9:12:29

EasyExcel 动态设置表格的背景颜色和排列

项目中使用EasyExcel把数据以excel格式导出&#xff0c;其中设置某一行、某一列单元格的背景颜色、排列方式十分常用&#xff0c;记录下来方便以后查阅。 1. 导入maven依赖&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>easy…...

编程日记 2025/6/3 9:06:15

python俄罗斯方块.py

俄罗斯方块.py import pygame import random# 初始化游戏 pygame.init()# 设置游戏窗口的大小 screen_width 800 screen_height 600 play_width 300 play_height 600 block_size 30top_left_x (screen_width - play_width) // 2 top_left_y screen_height - play_heigh…...

编程日记 2025/6/4 1:23:45

IP协议详解

目录 一. IP协议概述 1. 概念 2. 特点 (1) 无连接性 (2) 不可靠传输 (3) 数据包分片和重组 二. IP协议报文格式 1. 版本 (4位) 2. 首部长度 (4位) 3. 服务类型 (8位) 4. 总长度 (16位) 5. 标识, 标志位, 片偏移 6. 生存时间 (8位) 7. 协议 (8位) 8. 首部检验和 (1…...

编程日记 2025/6/3 2:25:43

青少年编程与数学 02-004 Go语言Web编程 02课题、依赖管理

青少年编程与数学 02-004 Go语言Web编程 02课题、依赖管理 课题摘要:一、项目结构各目录说明&#xff1a; 二、依赖项三、依赖管理任务四、依赖管理步骤1. 初始化Go Modules项目2. 添加依赖3. 指定依赖版本4. 更新依赖5. 清理未使用的依赖6. 离线工作7. 模块隔离8. 可重现构建 …...

编程日记 2025/6/2 14:56:48

代码生成器

源码 表结构 代码的目录结构 后端代码 前端代码 查询数据库的表 前端 后端 只查询当前数据库的表去除掉定时任务和生成器的表格去除掉已经导入的表格<select id="selectDbTableList" parameterType="GenTable" resultMap="GenTableResult"…...

编程日记 2025/6/3 6:08:36

MySQL 性能调优：打造高效数据库

SQL 语句层面的性能调优策略 合理选择字段属性 在创建 MySQL 表时&#xff0c;为了获取更好的性能&#xff0c;选择合适的字段属性至关重要。 首先&#xff0c;要依据实际情况合理设置字段的类型及宽度。例如&#xff0c;对于像手机号码这类固定长度为 11 位的字段&#xff…...

编程日记 2025/6/2 14:39:52

Elasticsearch 实战应用：提升数据洞察与交互体验

随着数据量的不断增长和数据处理需求的日益复杂&#xff0c;Elasticsearch 在实战应用中的价值愈发凸显。在本次教学中&#xff0c;我们继续深入探索 Elasticsearch 的更多高级实战应用&#xff0c;致力于培养学生在数据洞察和用户交互方面的卓越能力。 一、数据建模与优化策略…...

编程日记 2025/5/31 19:15:58

Ubuntu 配置静态 IP 地址

在 Ubuntu 系统中配置静态 IP 地址&#xff0c;适用于服务器或虚拟机需要固定 IP 的场景。以下是详细的步骤说明。 1. 确认网络接口信息 在配置之前&#xff0c;先确认系统的网络接口名称和当前的网络配置。 1.1 查看网络接口 运行以下命令获取网络接口的名称&#xff08;如…...

编程日记 2025/6/1 7:10:27

2025美赛数学建模十大常用算法之层次分析法AHP详解

层次分析法&#xff08;Analytic Hierarchy Process, AHP&#xff09;详解 一、层次分析法简介 层次分析法&#xff08;AHP&#xff09;是一种系统化的多准则决策方法&#xff0c;由美国运筹学家萨蒂&#xff08;Thomas L. Saaty&#xff09;于20世纪70年代提出。AHP通过构建层…...

编程日记 2025/6/1 2:50:42

鸿蒙学习笔记：用户登录界面

文章目录 1. 提出任务2. 完成任务2.1 创建鸿蒙项目2.2 准备图片资源2.3 编写首页代码2.4 启动应用 3. 实战小结 1. 提出任务 本次任务聚焦于运用 ArkUI 打造用户登录界面。需呈现特定元素&#xff1a;一张图片增添视觉感&#xff0c;两个分别用于账号与密码的文本输入框&#…...

编程日记 2025/6/3 15:29:45

电脑上怎么运行手机APP（电脑上运行手机APP的4种方法）

玩家可能不愿意在小屏幕上使用 Android 应用程序。此外&#xff0c;某些游戏玩家可能更喜欢在更大的屏幕上寻找刺激的体验&#xff0c;例如 PC 提供的体验&#xff0c;这可以增强他们的乐趣。因此&#xff0c;他们可能对如何在 PC 上流畅地运行 Android 应用程序感到好奇。本指…...

编程日记 2025/6/4 10:18:57

Java原生实现代码沙箱的实现

代码沙箱实现 代码沙箱&#xff1a;只负责接收代码和输入&#xff0c;返回编译运行的结果&#xff0c;不负责判题&#xff08;可作为独立项目/服务&#xff0c;提供给其他需要执行代码的项目使用&#xff09; 以Java语言为主&#xff0c;实现代码沙箱。主要学习其思想、关键流…...

编程日记 2025/5/31 21:18:27

Docker基础命令实战

问题&#xff1a;Error response from daemon: Get "https://index.docker.io/v1/search?qmysql&n25": dial tcp 199.59.148.9:443: connect: connection refused 在pull nginx时出现的报错&#xff0c;可能原因是镜像源过期了&#xff0c;我们需要更换镜像源 …...

编程日记 2025/5/31 10:46:43

【QT实战の心情笔记】

文章目录 界面布局主要界面分为三部分&#xff1a;1. 笔记列表区域2. 笔记内容编辑区域3. 操作按钮区域 Qt Designer 界面设计步骤完整界面布局图各控件设置和属性Qt Designer 文件 (.ui) 数据库表结构SQL 表结构&#xff1a; 逻辑代码1. 项目结构2. Note 类 (Note.h 和 Note.c…...

编程日记 2025/6/3 20:09:10

关于Unity VFX 在Spawn状态的一些笔记

一. periodic burst 和 single burst 的区别 1. Single Burst 定义：Single Burst 是一次性发射粒子，只在粒子系统启动时触发一次。 它是一个瞬时的发射行为，适合单次效果。 特性： 只触发一次。发射时间通常是粒子系统启动时。不会重复发射，除非重新触发粒子系统。适用场景…...

编程日记 2025/6/1 7:10:16

AutoMQ 流表一体新特性 Table Topic 发布： 无缝集成 AWS S3 Table 和 Iceberg

超越共享存储&#xff1a;使用 Apache Iceberg 中的 AutoMQ Table Topic 实现流处理与分析的统一 自 2023 年底官宣以来&#xff0c;AutoMQ 成功地将 Apache Kafka 从“Shared Nothing architecture”转变为“Shared Storage architecture”&#xff0c;这为京东、知乎、小红书…...

编程日记 2025/5/31 8:50:43

springboot445新冠物资管理(论文+源码)_kaic

摘 要 使用旧方法对新冠物资管理的信息进行系统化管理已经不再让人们信赖了&#xff0c;把现在的网络信息技术运用在新冠物资管理的管理上面可以解决许多信息管理上面的难题&#xff0c;比如处理数据时间很长&#xff0c;数据存在错误不能及时纠正等问题。这次开发的新冠物资管…...

编程日记 2025/6/4 13:54:33

【AIGC】LangChain 环境搭建及模型API能力集成使用详解

目录 一、前言 二、LangChain 概述 2.1 LangChain 是什么 2.2 LangChain 主要特点 2.3 LangChain能做什么和能力一览 2.4 LangChain 主要应用场景 三、环境准备 3.1 python 开发环境 3.1.1 python环境 3.1.2 配置vscode环境 3.1.3 安装LangChain相关插件包 3.2 获取…...

编程日记 2025/6/1 6:45:40

YOLOv8目标检测(六)_封装API接口

YOLOv8目标检测(一)_检测流程梳理&#xff1a;YOLOv8目标检测(一)_检测流程梳理_yolo检测流程-CSDN博客 YOLOv8目标检测(二)_准备数据集&#xff1a;YOLOv8目标检测(二)_准备数据集_yolov8 数据集准备-CSDN博客 YOLOv8目标检测(三)_训练模型&#xff1a;YOLOv8目标检测(三)_训…...

编程日记 2025/6/2 17:26:53

Firecrawl教程①：自动化抓取与数据转化，赋能AI应用

Firecrawl教程①：自动化抓取与数据转化，赋能AI应用 前言一、功能特点1. 支持 LLM 可处理的数据格式2. 全面抓取网站3. 强大的操作支持4. 灵活的定制选项5. 支持多种编程语言 SDK二、如何开始使用 Firecrawl第一步：获取 API 密钥第二步：官网在线工具使用第三步：安装 Firecr…...

编程日记 2025/6/1 6:45:36

2-2-18-17 QNX系统架构之“实时”

阅读前言 本文以QNX系统官方的文档英文原版资料为参考&#xff0c;翻译和逐句校对后&#xff0c;对QNX操作系统的相关概念进行了深度整理&#xff0c;旨在帮助想要了解QNX的读者及开发者可以快速阅读&#xff0c;而不必查看晦涩难懂的英文原文&#xff0c;这些文章将会作为一个…...

编程日记 2025/6/2 15:25:18

Linux下部署MySQL8.0集群 - 主从复制(一主两从)

目录 一、部署前准备 1、查看系统信息 # 查看系统版本 cat /etc/red* # 查看系统位数 getconf LONG_BIT[rootlocalhost ~]# cat /etc/red* CentOS Linux release 7.5.1804 (Core) [rootlocalhost ~]# getconf LONG_BIT 642、下载对应安装包 进入MySQL官网&#xff1a;https:…...

编程日记 2025/5/30 22:48:57

将HTML转换为PDF：使用Spire.Doc的详细指南

目录 引言 1. 为什么选择 Spire.Doc&#xff1f; 1.1 主要特点 1.2 适用场景 2. 准备工作 2.1 引入 Spire.Doc 依赖 2.2 禁用 SSL 证书验证 3. 实现功能 3.1 主类结构 3.2 代码解析 4. 处理图像 5. 性能优化 5.1 异步下载图像 示例代码 5.2 批量处理优化 示例代…...

编程日记 2025/6/4 6:13:57

HarmonyOS 实践 - 设计模式在代码中的作用

文章目录 前言设计模式概述单例模式&#xff1a;全局状态管理代码分析 策略模式&#xff1a;界面主题切换代码分析 示例测试单例模式测试策略模式测试 体验评价总结 前言 在软件开发中&#xff0c;设计模式是公认的最佳实践&#xff0c;它能帮助开发者通过模块化和规范化的代码…...

编程日记 2025/6/1 14:56:58

kubeadm一键部署K8S 集群架构

kubeadm一键部署K8S 集群架构(centos7) https://www.k8src.cn/ https://kubernetes.io/zh-cn/docs/home/ https://blog.csdn.net/m0_58709145/article/details/140128179 https://blog.csdn.net/jiaqijiaqi666/article/details/129745828 Kubeadm init报错[ERROR CRI]: contai…...

编程日记 2025/6/2 8:40:15

[NSSCTF 2022 Spring Recruit]factor

给了&#xff1a; 说n是p*q 先求一下p*q factordb.com 然后再让pq 得到&#xff1a;31207540994438423298 接着用md5加密得到falg NSSCTF{7957a92ef959998115a6bda6d992656e}...

编程日记 2025/6/1 9:20:07

go 中使用redis 基础用法

1、安装redis 参考链接&#xff1a;https://www.codeleading.com/article/98554130215/ 1.1 查看是否有redis yum 源 yum install redis没有可用的软件包&#xff0c;执行1.2 1.2下载fedora的epel仓库 yum install epel-release --下载fedora的epel仓库1.3启动redis s…...

编程日记 2025/5/29 10:09:49

git branch -r（--remotes ）显示你本地仓库知道的所有 远程分支 的列表

好的&#xff0c;git branch -r 这个命令用于列出远程分支。让我详细解释一下&#xff1a; 命令&#xff1a; git branch -rdgqdgqdeMac-mini ProductAuthentication % git branch -rorigin/main作用&#xff1a; 这个命令会显示你本地仓库知道的所有 远程分支 的列表。它不…...

编程日记 2025/5/31 20:16:37

回归预测 | MATLAB实现CNN-BiGRU卷积神经网络结合双向门控循环单元多输入单输出回归预测

回归预测 | MATLAB实现CNN-BiGRU卷积神经网络结合双向门控循环单元多输入单输出回归预测 目录 回归预测 | MATLAB实现CNN-BiGRU卷积神经网络结合双向门控循环单元多输入单输出回归预测预测效果基本介绍程序设计参考资料预测效果 基本介绍 CNN-BiGRU，即卷积神经网络（CNN）与双…...

编程日记 2025/6/2 20:36:14