-
- CSS设置字体粗细,原来我一直改错了!
- 设置CSS字体粗细主要通过font-weight属性实现,可使用数值100至900或normal、bold等关键字控制;1.数值设置更精细,如400为正常、700为粗体;2.关键字设置简单但灵活性较低,bolder和lighter为相对值;3.font-weight具有继承性,子元素未显式设置时会继承父元素值;4.字体显示效果受字体本身、浏览器及操作系统影响,建议进行多平台测试;5.可使用CSS变量提高维护性,如定义--font-weight-normal并用var调用。
- 文章 · 前端 | 1个月前 | CSS 关键字 数值 字体粗细 font-weight 215浏览 收藏
-
- 手把手教你用JS实现requestAnimationFrame动画(附代码)
- requestAnimationFrame在JavaScript中用于高效实现动画和性能优化。1)基本用法是通过它在下一次重绘前调用函数,实现平滑动画。2)工作原理基于浏览器渲染循环,同步屏幕刷新率,避免不必要的重绘。3)在实际项目中,可用于复杂动画,如粒子系统,需注意取消动画以防内存泄漏,并通过性能监控和逻辑分离进行优化。
- 文章 · 前端 | 1个月前 | 209浏览 收藏
-
- JS实战教学!手把手教你轻松实现数组去重
- 在JavaScript中实现数组去重可以使用以下方法:1.使用Set对象,适用于简单数组,去重高效,时间复杂度O(n)。2.使用filter和indexOf方法,适用于对象数组,根据特定属性去重,时间复杂度O(n^2)。3.使用reduce方法,灵活性高,适用于需要额外操作的场景,时间复杂度O(n^2)。4.使用Map对象,适用于大规模数据,时间复杂度O(n),性能优越。
- 文章 · 前端 | 1个月前 | 290浏览 收藏
-
- CSS图片变大缩小?手把手教你快速调整图片尺寸
- 调整CSS图片大小的核心在于合理使用width、height、object-fit、max-width等属性。1.设置width和height可直接控制图片尺寸,但需配合auto保持比例以避免变形;2.使用max-width和max-height可限制图片最大尺寸,实现响应式设计;3.object-fit属性定义图片如何适应容器,常用值包括cover(覆盖容器并裁剪)、contain(完整显示并留白)、fill(拉伸填充)等;4.响应式图片可通过srcset与sizes属性实现,根据屏幕尺寸加载不同大小的
- 文章 · 前端 | 1个月前 | 响应式图片 object-fit SVG width/height CSS图片大小 190浏览 收藏
-
- CSSmargin属性不会用?手把手教你玩转margin小技巧
- margin属性在CSS中可以接受1到4个值,分别对应不同方向的外边距设置:1.单值:所有方向相同;2.双值:上下和左右;3.三值:上、左右、下;4.四值:上、右、下、左。使用时需注意外边距塌陷、负值用法、响应式设计及盒模型的影响,确保布局美观稳定。
- 文章 · 前端 | 1个月前 | 182浏览 收藏
-
- JS六种创建对象姿势大揭秘,手把手教你学会!
- 在JavaScript中创建对象的方法包括:1.对象字面量,2.构造函数,3.原型链,4.类语法,5.Object.create()。每种方法都有其独特的用途和优势,选择时需根据具体需求和项目复杂度。
- 文章 · 前端 | 1个月前 | 387浏览 收藏
-
- JS数组去重不求人!多种方法实战教学一次性学会
- 在JavaScript中实现数组去重可以使用以下方法:1.使用Set对象,适用于简单数组,去重高效,时间复杂度O(n)。2.使用filter和indexOf方法,适用于对象数组,根据特定属性去重,时间复杂度O(n^2)。3.使用reduce方法,灵活性高,适用于需要额外操作的场景,时间复杂度O(n^2)。4.使用Map对象,适用于大规模数据,时间复杂度O(n),性能优越。
- 文章 · 前端 | 1个月前 | 101浏览 收藏
-
- 手把手教你用ECharts打造炫酷动态数据图表(附代码)
- ECharts是一个强大的JavaScript图表库,能实现各种数据可视化效果。首先,引入ECharts库到HTML文件中,接着创建DOM容器,使用echarts.init()初始化实例,并通过配置option对象设置图表参数,最后调用myChart.setOption()渲染图表;其次,动态更新数据可通过setInterval()定时修改数据并重新渲染;此外,ECharts提供丰富的图表类型,如折线图展示趋势、柱状图比较类别、饼图显示比例、散点图表现关系等;用户还可通过修改option对象自定义标题、坐
- 文章 · 前端 | 1个月前 | JavaScript 数据可视化 echarts 动态数据 图表类型 158浏览 收藏
-
- JS数组轻松转对象!手把手教学让你秒懂
- 在JavaScript中,将数组转换为对象可以使用Object.assign或展开运算符来实现,也可以使用reduce方法将数组元素的特定属性作为键。1.使用Object.assign或展开运算符可以将数组索引作为对象键。2.使用reduce方法可以将数组元素的特定属性(如id)作为对象键,并保留其他信息。转换时需注意性能、数据一致性、键的唯一性和错误处理。
- 文章 · 前端 | 1个月前 | 165浏览 收藏
-
- 手把手教你用JS优雅地格式化日期,实现日期美化
- 在JavaScript中格式化日期可以使用多种方法:1)使用内置的Date对象,但不够灵活;2)使用第三方库如Moment.js、date-fns,提供强大功能但需考虑依赖成本;3)使用Intl.DateTimeFormat,灵活但需注意浏览器兼容性;4)自定义函数,提供最大灵活性和控制权,但需自行编写逻辑。
- 文章 · 前端 | 1个月前 | 188浏览 收藏
-
- JS快速将日期转时间戳,小白也能看懂!
- 在JavaScript中,可以通过以下步骤将日期转换为时间戳:1.使用Date对象的getTime()方法获取当前或指定日期的时间戳;2.使用Date.UTC()方法创建基于UTC时间的日期对象,再转换为时间戳,以处理不同时区;3.将毫秒级时间戳转换为秒级时间戳;4.结合Intl.DateTimeFormat和Date对象处理用户输入的日期字符串,确保时间戳基于用户时区。
- 文章 · 前端 | 1个月前 | 269浏览 收藏
-
- JS这样玩SVG元素!3个超实用技巧教你会用到爽
- 操作SVG元素与操作DOM类似,需先获取元素再修改属性或添加事件。1.获取SVG元素使用document.getElementById()或document.querySelector();2.修改属性可用setAttribute()或直接赋值;3.添加事件监听器通过addEventListener();4.动态创建SVG元素需用createElementNS()并指定命名空间;5.实现动画可通过requestAnimationFrame()或CSS动画;6.处理事件时注意坐标计算差异;7.优化性能包括减
- 文章 · 前端 | 1个月前 | JavaScript dom 动画 性能优化 SVG 334浏览 收藏
-
- JS实现平滑滚动效果?4种优化方案大公开!
- 实现平滑滚动的核心在于控制滚动速度和动画时长,1.使用window.scrollTo或element.scrollTo配合requestAnimationFrame模拟动画效果;2.通过缓动函数使滚动更自然;3.优化性能时减少重排重绘,优先使用CSStransform;4.处理兼容性可使用polyfill或兼容性前缀;5.实现滚动劫持需监听wheel事件并自定义滚动逻辑,但需注意用户体验与可访问性。
- 文章 · 前端 | 1个月前 | 平滑滚动 194浏览 收藏
-
- HTML中span标签的作用与用法详解
- <span>标签的主要作用是提供一个无语义的行内容器,用于样式化或JavaScript操作文本片段。1.样式化文本:可通过CSS改变被包裹文字的颜色、字体等样式;2.交互控制:作为JavaScript操作目标,实现动态内容更新;3.特效实现:结合CSS与JS创建动画、高亮等效果;4.兼容性处理:协助解决浏览器差异问题。<span>为行内元素,不影响布局,适用于仅需对文本进行样式或行为调整的场景,而<div>为块级元素,适合构建结构区域。使用时应避免滥用,优先语义化标签,
- 文章 · 前端 | 1个月前 | html CSS JavaScript 行内元素 span标签 225浏览 收藏
-
- JS防抖和节流到底啥意思?简单例子轻松搞懂!
- 防抖和节流是JavaScript中优化性能的技术。防抖在事件停止触发后执行函数,适用于搜索框输入;节流在一定时间内只执行一次函数,适用于滚动事件。
- 文章 · 前端 | 1个月前 | 326浏览 收藏
查看更多
课程推荐
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 511次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 498次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 484次学习
-
- Golang深入理解GPM模型
- Golang深入理解GPM调度器模型及全场景分析,希望您看完这套视频有所收获;包括调度器的由来和分析、GMP模型简介、以及11个场景总结。
- 474次学习
查看更多
AI推荐
-
- 千音漫语
- 千音漫语,北京熠声科技倾力打造的智能声音创作助手,提供AI配音、音视频翻译、语音识别、声音克隆等强大功能,助力有声书制作、视频创作、教育培训等领域,官网:https://qianyin123.com
- 91次使用
-
- MiniWork
- MiniWork是一款智能高效的AI工具平台,专为提升工作与学习效率而设计。整合文本处理、图像生成、营销策划及运营管理等多元AI工具,提供精准智能解决方案,让复杂工作简单高效。
- 85次使用
-
- NoCode
- NoCode (nocode.cn)是领先的无代码开发平台,通过拖放、AI对话等简单操作,助您快速创建各类应用、网站与管理系统。无需编程知识,轻松实现个人生活、商业经营、企业管理多场景需求,大幅降低开发门槛,高效低成本。
- 99次使用
-
- 达医智影
- 达医智影,阿里巴巴达摩院医疗AI创新力作。全球率先利用平扫CT实现“一扫多筛”,仅一次CT扫描即可高效识别多种癌症、急症及慢病,为疾病早期发现提供智能、精准的AI影像早筛解决方案。
- 93次使用
-
- 智慧芽Eureka
- 智慧芽Eureka,专为技术创新打造的AI Agent平台。深度理解专利、研发、生物医药、材料、科创等复杂场景,通过专家级AI Agent精准执行任务,智能化工作流解放70%生产力,让您专注核心创新。
- 90次使用