网上一搜一大堆类似但大多都相对简单,适用的场景并不多。多数也不支持赋值 不支持单个删除更改 我就借鉴了一下网上文章的思路,为了达到自己想要的效果做了相对应的更改。 效果图如下: 直接上代码! WXML代码: 点击查看代码 <!-- 车牌号码输入框 --> <view wx:if="{{isSplit ...
写在开头 点赞 + 收藏 学会 预览图片 一般情况下,预览图片功能,是后端返回一个图片地址资源(字符串)给前端,如:ashuai.work/static/img/… 前端再把这个值丢到img图片的src属性中去即可 之所以有这个图片地址资源,也是因为之前有上传图片的操作,后端 ...
使用 CSS 实现渐变效果 使用 CSS 实现渐变效果非常简单且强大,CSS 提供了两种主要的渐变效果:线性渐变(linear gradient)和径向渐变(radial gradient)。下面是如何使用这些渐变效果的详细说明。 1. 线性渐变(Linear Gradient) 线性渐变沿直线方向 ...
使用 CSS 实现多列布局 在 CSS 中,可以通过多种方法实现多列布局,以下是一些常见的方法: 1. 使用 Flexbox Flexbox 是一个强大的布局工具,适合用于需要灵活布局的场景。以下是一个基本的示例: <div class="container"> <div class="column ...
写在开头 点赞 + 收藏 学会 1. xmlHttpRequest是如何取消请求的? 实例化的XMLHttpRequest对象上也有abort方法 const xhr = new XMLHttpRequest(); xhr.addEventListener('load', f ...
写在开头 点赞 + 收藏 学会 需求简介 轮播图是我们前端开发中的一个常见需求,在项目开发中,我们可以使用element、ant等UI库实现。某些场景,为了一个简单的功能安装一个库是没必要的,我们最好的选择就是手搓。 我们来看一个需求 上述需求核心就是实现一个无缝轮播的切换效 ...
写在开头 点赞 + 收藏 学会 7 种方案解决移动端1px边框的问题 造成边框变粗的原因 css中的1px并不等于移动设备的1px,这是由不同手机由不同像素密度,在window对象中有一个devicePixelRatio属性,他可以反应css中像素与设备的像素比 device ...
之前见过在线版的VSCode,被惊讶到了。网页上竟然可以编辑电脑本地的文件,打破了网页无法编辑本地电脑文件的限制。一直好奇怎么做的。抽空研究了一下,然后发现其实也不难。 ...
Bootstrap/布局 目录Bootstrap/布局断点容器网格列沟槽null 断点 Breakpoint Class infix Dimensions Extra small None <576px Small sm ≥576px Medium md ≥768px Large lg ≥992px ...
今天我们来学习一个有意思的多行文本输入打字效果,像是这样: 这个效果其实本身并非特别困难,实现的方式也很多,在本文中,我们更多的会聚焦于整个多行打字效果最后的动态光标的实现。 也就是如何在文本不断变长,在不确定行数的情况下,让文字的最末行右侧处,一直有一个不断闪烁的光标效果: 单行文本打字效果 在此 ...
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:霁明 背景 我们产品中会有一些流程图应用,例如审批中心的审批流程图: 我们数栈产品内的流程图,基本都是使用的 mxGraph 实现的,mxGraph 使用了S ...
写在开头 点赞 + 收藏 学会 最近,我的一个朋友在面试中被一个关于 sessionStorage 的问题难住了。我们来聊聊这个话题。 sessionStorage 能在多个标签页之间共享数据吗?在回答这个问题之前我们先来聊聊另一个存储API localstorage loc ...
你不知道的 CSS 之包含块 一说到 CSS 盒模型,这是很多小伙伴耳熟能详的知识,甚至有的小伙伴还能说出 border-box 和 content-box 这两种盒模型的区别。 但是一说到 CSS 包含块,有的小伙伴就懵圈了,什么是包含块?好像从来没有听说过这玩意儿。 好吧,如果你对包含块的知识一 ...
CSS 属性计算过程 你是否了解 CSS 的属性计算过程呢? 有的同学可能会讲,CSS属性我倒是知道,例如: p{ color : red; } 上面的 CSS 代码中,p 是元素选择器,color 就是其中的一个 CSS 属性。 但是要说 CSS 属性的计算过程,还真的不是很清楚。 没关系,通过此 ...
写在开头 点赞 + 收藏 学会 在项目中我们可能会遇到当鼠标在某个区域内,我们希望滚动鼠标里面的内容可以横向滚动; 比如我们一些常见的后台状态栏: 那这种该怎么写?请看栗子 代码如下: <template> <div> <div class="top"> <div class ...
随便写的小网页练习: 原视频:十分钟学会写网页【编程前端入门】 简介: 本期重做了好几遍,是全新的视角和概念,从浏览器底层渲染原理到实现网站的演示,一节课讲透,必看的一期。后面不管是写小程序还是App,都会用到这一期的概念。 这一期内容是我做完第一章个人网站后更新的,用来替代原先没做好的第三节, ...
RSS(Really Simple Syndication)是一种 XML 格式,用于网站内容的聚合和分发,让用户能快速浏览和跟踪更新。RSS 文档结构包括 `<channel>` 和 `<item>` 元素,允许内容创作者分享标题、链接和描述。通过 RSS,用户可以定制新闻源,过滤不相关信息,提高... ...
这篇文章介绍了如何运用Tailwind CSS框架创建响应式网页设计,涵盖博客、电商网站及企业官网的布局实例,包括头部导航、内容区域、侧边栏、页脚及轮播图等组件的响应式实现。同时,探讨了与JavaScript框架集成、CSS预处理器配合、设计工具应用以及服务器端渲染的策略,并提供了性能优化、代码组织... ...
我们是袋鼠云数栈 UED 团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。 本文作者:修能 这是一段平平无奇的 SQL 语法 SELECT id, sum(name) FROM student GROUP BY id ORDER BY id; ...
这篇文章介绍了Tailwind CSS框架的特点与优势,包括其作为实用性的CSS框架如何通过预设的样式类实现快速布局和设计,以及如何在不牺牲响应式和自适应性的同时减少开发时间。此外,还提及了框架的可定制性,允许开发者轻松创建符合项目需求的样式规则,从而提高前端开发效率。 ...