
HTML
文章平均质量分 53
学习技巧、笔记
html工作&学习-知识点
JackieDYH
阅技术、码经验、勤总结、乐分享、喜交流。
展开
-
使用HTML+JavaScript生成一个贪吃蛇游戏-demo
使用HTML+JavaScript生成一个贪吃蛇游戏-demo。原创 2025-03-17 14:00:20 · 198 阅读 · 0 评论 -
HTML+JavaScript实现随机点名2.0|随机抽奖效果-demo
HTML+JavaScript实现随机点名2.0|随机抽奖效果-demo。原创 2025-03-10 09:37:09 · 372 阅读 · 0 评论 -
url encode 编码转换
编码:使用对字符串进行编码。解码:使用对编码后的字符串进行解码。是用于编码 URI 组件的 JavaScript 函数。它会将字符串中的某些字符替换为一个或多个由百分号(%)后跟两位十六进制数字表示的字符,以确保字符串可以在 URI 中安全传输。要将编码过的字符串转换回来,可以使用函数。这个函数会将这些百分号编码的字符还原为原来的字符。');所以,如果你有一个被编码过的字符串,你可以使用来解码它。原创 2024-12-30 09:04:16 · 1029 阅读 · 0 评论 -
white-space使用技巧-国际化使用
(空白字符)指的是那些不可见的字符,它们用于分隔代码中的元素,使代码更易读。元素内的文本不会换行,会一直在同一行显示。在代码编辑和格式化中,原创 2024-12-23 09:10:45 · 473 阅读 · 0 评论 -
文件导出和下载封装download-案例
download.excel(data, '列表.xls')原创 2024-09-30 15:18:09 · 244 阅读 · 0 评论 -
Vue3+Vite项目中使用tailwindcss-安装配置
确保你已经安装了 TypeScript 和 Tailwind CSS 的类型定义。原创 2024-08-05 10:13:45 · 666 阅读 · 0 评论 -
Vue项目移动端h5页面在IOS上点击input输入文本框页面会自动放大的问题
需要给 ios 和安卓 app 开发 h5 页面,在安卓上测试没有问题,但是 ios上点击输入框会导致页面缩放失败。原创 2024-07-29 09:02:00 · 579 阅读 · 0 评论 -
Nuxt.js中下载后端返回的文件流格式的文件进行文件下载
如果你的 Nuxt.js 项目已经安装并配置了这个模块,你可以直接使用它来发送请求并下载文件。发送 GET 请求到你的后端 API 端点以获取文件流。然后,使用 JavaScript 创建一个临时的。是你希望保存的文件名和扩展名。在 Nuxt.js 中,你可以使用全局的。确保你的 Nuxt.js 应用已包含。对象来处理 HTTP 请求,这是由。响应头中提取,如果后端设置了的话。方法会在点击按钮时触发。在你的组件或页面中,使用。是你的 API 端点,而。元素来模拟文件下载。原创 2024-07-15 09:56:06 · 376 阅读 · 0 评论 -
HTML-缓动函数-贝萨尔曲线
缓动函数使得动画开始时速度较快,然后逐渐减慢,直至停止。这个简单的demo展示了如何将缓动函数应用于实际的动画效果中,创造出平滑自然的动画过渡效果。函数来实现一个元素的平滑移动动画。这个demo创建了一个按钮,当点击它时,会使页面上的一个元素向右平滑移动。元素会在1秒内向右移动300像素。原创 2024-07-01 09:11:20 · 379 阅读 · 0 评论 -
Nodejs中循坏代码目录,提取代码中中文文本到文件中
Nodejs中循坏代码目录,提取代码中中文文本到文件中。原创 2024-05-30 11:45:57 · 340 阅读 · 0 评论 -
html+css实现表格超出可视范围后,左右滑动展示数据
html+css实现表格超出可视范围后,左右滑动展示数据。原创 2024-04-01 10:32:17 · 945 阅读 · 0 评论 -
html+css+JavaScript实现左右滑动区域添加自定义按钮实现移动
选项可以使滚动动作更平滑,但这并不是在所有浏览器中都支持的。如果需要支持更多浏览器,可能需要使用polyfill或者自定义JavaScript动画来实现平滑滚动效果。要在一个左右可以滑动的容器中添加两个固定位置的按钮(左边一个、右边一个),你可以使用。,以便让按钮相对于该容器定位。这样,按钮就会随着容器一起滚动,但始终保持在容器的两侧。需要为按钮添加JavaScript来处理滚动动作。来定位按钮,同时为这个滑动容器设置。原创 2024-03-11 13:28:34 · 1518 阅读 · 0 评论 -
Web端使用Lottie渲染AE导出的json动画-lottie-web-demo
创建LottieAni文件。原创 2024-03-11 13:28:11 · 2115 阅读 · 0 评论 -
HTML+JavaScript实现随机点名|随机抽奖效果-demo
HTML+JavaScript实现随机点名|随机抽奖效果-demo。原创 2024-03-04 10:21:38 · 1346 阅读 · 0 评论 -
web中监听页面的显示和隐藏状态-visibilitychange
事件来检测页面的显示和隐藏状态。这个事件会在用户切换到其他标签页、最小化浏览器窗口或切换到其他应用程序时触发。通过监听这个事件,你可以执行一些相应的操作,例如暂停动画、减少定时器的频率等,以提高性能和用户体验。事件在大多数现代浏览器中都有良好的支持,但在一些较旧的浏览器中可能不支持。因此,在使用之前,最好检查浏览器的兼容性。例子中,当页面被隐藏时(用户切换到其他标签页或最小化浏览器窗口),,并触发相应的操作。以下是一个简单的示例,演示如何使用。在Web开发中,可以使用。,同样会触发相应的操作。原创 2024-01-29 10:22:50 · 1326 阅读 · 1 评论 -
vue3使用css变量实现主题切换-黑白切换
vue3使用css变量实现主题切换-黑白切换原创 2024-01-18 15:32:13 · 705 阅读 · 0 评论 -
Vue如何实现获取可视范围内的数据
通过使用 Intersection Observer API,你可以动态地观察元素是否在视口内,并根据需要更新相关的数据。在 Vue 中,要获取可视范围内的数据,你可以使用 Intersection Observer API 来观察元素是否在视口内,并根据需要更新数据。当目标元素进入视口时,会触发回调函数,我们可以在回调函数中更新数据或执行其他操作。当目标元素进入或离开视口时,你可以在回调函数中执行相应的逻辑来更新数据或执行其他操作。引用元素,你需要给目标元素添加。首先,你可以在 Vue 组件的。原创 2024-01-18 15:29:20 · 766 阅读 · 0 评论 -
HTML中元素的滚动溢出影响其父级元素的滚动-overscroll-behavior
在编写跨浏览器兼容的代码时,请考虑使用其他滚动事件相关属性或 JavaScript 来实现所需的滚动行为。是一个 CSS 属性,用于控制滚动事件在元素和其父级滚动容器之间的链接行为。这样,当用户在滚动元素时,滚动事件将仅在元素内部进行处理,不会传递给父级容器。是一个 CSS 属性,用于控制元素在滚动到边界时的滚动行为。该属性可以应用于任何具有滚动内容的元素,例如滚动容器(如。这样,当用户在滚动元素时,不会出现滚动溢出的效果。例如,要禁止滚动事件链接到父级滚动容器,可以将。原创 2024-01-18 15:12:05 · 805 阅读 · 0 评论 -
HTML中网页缩放配置mete-viewport
标签的作用是为了确保网页在移动设备上以设备宽度为基准进行显示,同时限制了初始和最大的缩放级别,允许用户手动缩放,并禁止自动缩小适应。这有助于提供更一致和可控的移动端用户体验。视口是用户在网页上看到的可见区域,而这个标签的目的是为了确保网页在各种设备上能够以合适的方式显示。这是一个用于设置网页视口(viewport)的HTML。原创 2024-01-04 15:09:22 · 1235 阅读 · 0 评论 -
Vue中使用JavaScript中的requestAnimationFrame动画循环实现循环滚动效果-demo
requestAnimationFrame是一个由浏览器提供的 JavaScript 方法,用于在下一次浏览器重绘之前执行指定的回调函数。它接受一个回调函数作为参数,并返回一个整数值,可以用于取消动画循环。使用 requestAnimationFrame 可以创建平滑的动画效果,并且能够有效地控制动画的帧率,以适应不同的设备和浏览器性能。原创 2024-01-01 21:38:36 · 1685 阅读 · 0 评论 -
Vue-页面解决浏览器自动填充input输入框账号密码
登录注册页面禁止浏览器自动填充账号密码。原创 2023-12-18 10:47:19 · 1655 阅读 · 0 评论 -
vue项目实现当用户用手机打开web端项目跳转到移动端的域名,反之跳转到移动端域名
实现当用户用手机打开web端项目时跳转到移动端的域名,反之跳转到web端域名,你可以使用JavaScript来检测用户的设备类型,并根据设备类型进行跳转。来获取用户的User-Agent信息,然后通过正则表达式判断是否是手机设备。标签中,或者在一个单独的JavaScript文件中,并在需要的页面中引入。这样当用户打开你的项目时,会根据设备类型自动跳转到对应的域名。将页面重定向到移动端的域名,否则重定向到web端的域名。可以将上述代码放在你的项目中适当的位置,例如在页面的。替换为你实际使用的域名。原创 2024-05-20 11:15:25 · 240 阅读 · 0 评论 -
Vue中实现当img图片加载失败的时候显示本地默认图片
Vue中实现当img图片加载失败的时候显示本地默认图片。原创 2024-05-31 10:35:12 · 185 阅读 · 0 评论 -
css禁用按钮点击事件
要禁用按钮的点击事件,您可以使用CSS的。这将使按钮不再响应鼠标点击事件。原创 2023-11-02 10:50:46 · 909 阅读 · 0 评论 -
img标签如何将<svg></svg>数据渲染出来
元素的宽度和高度,以指定 SVG 图像的显示尺寸。你可以根据你的需求选择其中一种方法来使用。 数据编码为 Data URL,并将其作为 。 数据编码为 Data URL,并将其作为 。 元素来嵌入 SVG 数据。 属性值传递给它。同时,我们可以设置 。,并将 SVG 数据作为 。在上述示例中,我们使用 。 数据作为图像插入到 。在上述示例中,我们将 。这两种方法都可以将 。 数据插入到 。 属性值传递给 。 元素,并设置 。原创 2023-10-23 09:32:43 · 2463 阅读 · 0 评论 -
外部统一设置了::-webkit-scrollbar { display: none; }如何单独给特定元素开启滚动条设置样式-web页面滚动条样式设置
元素中单独开启滚动条的样式,你可以使用CSS的级联选择器来覆盖外部样式。元素中单独开启滚动条的样式,而不受外部样式的影响。选择器来重新显示滚动条,并设置滚动条的样式。选择器来隐藏滚动条。属性来设置滚动条的宽度和颜色。来隐藏滚动条,但是想要在。以下是一个示例,展示如何给。在上述代码中,我们首先使用。元素的样式中,我们使用。如果你在外部统一设置了。通过这种方式,你可以在。原创 2023-10-16 11:33:45 · 1997 阅读 · 0 评论 -
JS将两个数组中的数据合并到一个数组中[[],[]]
将[ 1582848000000, 1582934400000, 1583020800000, 1583107200000, 1583193600000 ]和[806730620, 806730620, 806730620, 806730620, 806730620]的长度相同,并且对应的索引位置上的元素是一一对应的。如果两个数组的长度不一致,或者对应的索引位置上的元素不一致,结果可能会不符合预期。数组,并将每个时间戳和对应的数据组合成一个新的数组。方法将两个数组按照指定的格式进行组合。原创 2024-06-03 07:32:59 · 431 阅读 · 0 评论 -
echarts中api返回数据的结构是时间和数据是两个数组返回的如何使用
如果ECharts的API返回的数据结构是时间和数据分别作为两个数组返回的,你可以将这两个数组分别赋值给x轴和y轴的数据。数组赋值给y轴的数据。这样,你就可以在图表中显示时间和对应的数据了。确保将这些配置包含在传递给ECharts实例的。数组赋值给x轴的数据,使用了。在这个示例中,我们使用了。原创 2024-06-03 07:32:30 · 290 阅读 · 0 评论 -
当页面数据突然变长时,浏览器高度还停留在用户浏览的位置高度
请注意,这是一种基本的方法来实现滚动到位置的功能,具体的实现可能因页面结构和需求而有所不同。 变量存储了当前滚动位置的高度,使用了兼容不同浏览器的方式获取。然后,你可以更新页面数据,使其变长。你可以将这段代码放在适当的地方,例如在更新页面数据的后续操作中,确保在数据变长后,浏览器会滚动到用户浏览的位置高度。要在页面数据突然变长时,使浏览器保持在用户浏览的位置高度,可以使用 JavaScript 的 。 方法将浏览器滚动到之前的位置,恢复用户浏览的高度。 方法来滚动浏览器到指定的位置。原创 2024-06-17 09:00:24 · 250 阅读 · 0 评论 -
Vue中自定义实现类似el-table的表格效果实现行颜色根据数据去变化展示
主要使用div布局实现表格效果,并使用渐变实现行背景渐变的效果。原创 2023-09-29 06:00:00 · 613 阅读 · 0 评论 -
Vue实占比条的组件-demo
Vue实占比条的组件-demo。原创 2023-09-25 09:37:31 · 363 阅读 · 0 评论 -
css选择最后两个元素、奇数个,偶数个
要选择最后两个元素,可以使用。要选择奇数个元素,可以使用。要选择偶数个元素,可以使用。表示最后几个元素的个数。原创 2023-09-19 13:59:34 · 3043 阅读 · 0 评论 -
html实现邮件模版布局-flex布局&table布局-demo
邮件模版布局flex - 布局简单方便 兼容性差table - 优点 就是兼容性好,其他没有优点。原创 2023-09-11 10:47:15 · 1908 阅读 · 0 评论 -
vue实现数据栏无缝滚动实现方式-demo
通过实现两个item 进行循环。原创 2024-09-23 09:02:00 · 533 阅读 · 0 评论 -
CSS自动吸附scroll-snap-type和scroll-snap-align-demo
CSS的scroll-snap-type和scroll-snap-align参数可以实现滚动吸附效果,让滚动操作更加流畅自然。下面是关于这两个参数的详细说明以及使用教程。原创 2024-10-28 09:09:51 · 305 阅读 · 0 评论 -
vue中通过JavaScript实现web端鼠标横向滑动&触控板滑动效果-demo
JavaScript实现web端鼠标横向滑动&触控板滑动效果支持鼠标拖动滑动&触控板滑动效果。原创 2023-07-28 21:20:12 · 3101 阅读 · 1 评论 -
reset.css重置样式--小技巧
@charset "utf-8";body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select { margin: 0; padding: 0;}body { font-family: "微软雅黑", "宋体", Arial, Helvetica, sans-serif;...原创 2020-02-13 12:41:10 · 463 阅读 · 0 评论 -
normalize.css--样式重置文件
保护有用的浏览器默认样式而不是完全去掉它们一般化的样式:为大部分HTML元素提供修复浏览器自身的bug并保证各浏览器的一致性优化CSS可用性:用一些小技巧解释代码:用注释和详细的文档来/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css *//* Document ...原创 2020-03-05 12:48:00 · 743 阅读 · 0 评论 -
element-plus如何修改内部样式而不影响vue其他组件的样式
修饰符,以限制样式仅作用于当前组件中的元素。这样就可以在不影响全局样式的情况下,修改。是一个深度选择器,可以选择组件内的所有元素,而不仅仅是当前组件的根元素。以上两种方法都可以达到修改。可以在组件的样式中使用。组件的样式而不影响其他。原创 2024-11-18 09:40:03 · 1348 阅读 · 0 评论 -
vue3中使用原始标签制作一个拖拽和点击上传组件上传成功后展示
这样就可以通过拖拽或点击上传文件,并在上传成功后展示上传的图片了。标签来实现上传文件的功能,同时可以通过。在Vue3中,可以使用原创 2023-08-02 10:41:44 · 697 阅读 · 0 评论