分类: 前端

MacOS 升级 Sonoma 之后 Chrome 低版本渲染 CSS mask-image属性使用 svg 出现边缘锯齿

MacOS 升级 Sonoma 之后 Chrome 低版本渲染 CSS mask-image属性使用 svg 出现边缘锯齿。

背景介绍

MacOS 升级最新版的 Sonoma 之后,通过 CSS 蒙层实现的样式,如果使用了 svg 会出现边缘锯齿。具体表现如下图:

这个现象在低版本 Chr[……]

继续阅读

2023-10-23 Comments (0)
阅读全文

Node如何获取计算机名称

在使用Node.js开发客户端应用时,可能会有获取计算机名的需求,以区分用户的多个设备。

这里所说的计算机名称(ComputerName),也称为设备名称(DeviceName),用户可以自定义自己的设备名称。

在 Windows 系统中,在此电脑(计算机、我的电脑)图标上右键,选择属性可以找到[……]

继续阅读

2023-06-06 Comments (0)
阅读全文

一个技术精致的网站:接口设计和图片加载

本文仅适用于互联网web开发者。

我们在看到一个网站的时,首先关注到的多是它的界面设计,美观并炫酷的页面,是让我们对它的开发者产生敬意的最容易的方式。

抛开界面和用户交互之后,从代码实现上,怎么才能看出一个网站的技术优雅而精致呢?

互联网从业者,不管是前端还是后端,肯定对这个问题多多少少都考虑[……]

继续阅读

前端 
2023-04-20 Comments (2)
阅读全文

Vue3的setup中使用ref获取dom元素

背景问题

  • 在vue3中input如何获取焦点?
  • vue3 setup语法糖如何获取dom元素?

vue2 的方法

在 vue2 中,在组件上设置 ref 属性之后,就可以通过 this.$refs.ref 访问到对应的 DOM 元素。

<input type="text" ref=[......]

继续阅读

2022-03-11 Comments (0)
阅读全文

前端浏览器缓存在html配置

HTML 缓存配置格式

HTML文件通过标签的 http-equiv 属性来配置HTML文件的 http 响应头

如:

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /&gt[......]

继续阅读

2022-01-18 Comments (0)
阅读全文

一道前端面试题

输入字符串’a(3)b(1)cde(2)f(0)’,得到输出结果:’aaabcdee’。

其中括弧内的数字是括弧前面字母的重复次数;如果字母后面没有括弧,就原样输出(相当于重复1次);括弧内数字为0则不输出。

这道题其实非常简单,但是有多种解题思路,涉及的基本知识点也很多。下面我会按照我觉得由低[……]

继续阅读

2022-01-17 Comments (0)
阅读全文

Vue3 setup使用模板引用$refs

在Vue2中,我们通常这么做实现一个模板引用:

<template>
  <input ref="input" />
</template>

<script>
export default {
  data() {},
  methods: {[......]

继续阅读

Vue 
2021-12-27 Comments (0)
阅读全文

使用 React Hooks 构建一个音频播放器

原文链接:https://letsbuildui.dev/articles/building-an-audio-player-with-react-hooks

今天我们将使用 HTMLAudioElement 接口构建一个基于 React Hooks 的音频播放器组件。这个播放器可以实现音频列表的[……]

继续阅读

2021-09-01 Comments (0)
阅读全文

H5处理全面屏iPhone底部边距

iPhone 从 X 开始使用全面屏,浏览网页的时候底部会有一条遮住可视区域,为了避免H5页面被iPhone底部条遮住,可以采取以下方案。

iPhone自适应底部

首先,iPhone自带了屏幕安全区域的处理策略,可以使用constant和env两个css特性来获取底部的安全距离,然后通过@sup[……]

继续阅读

2021-04-01 Comments (0)
阅读全文

苹果手机iPhone各型号分辨率及独立像素CSS适配

型号
尺寸
逻辑分辨率(点)
逻辑像素
Scale Factor
设备分辨率
物理像素
(渲染像素)
ppi

iPhone 3GS
3.5
320×480
@1x
320×480
163

iPhone 4
iPhone 4s
3.5
3[……]

继续阅读

前端, CSS 
2020-02-08 Comments (0)
阅读全文

IE6、IE7、IE8、Firefox、Chrome、Safari CSS hack兼容一览表

知道CSS的朋友一定听说过CSS hack,现在的浏览器IE、Firefox、Chrome、Opera、Safari。。。百家争鸣,可苦了Web前端开发人员了。

不同的浏览器对CSS的解释都有一点出入,特别是padding, line-height这些要细微控制的地方,下面的hack基本可[……]

继续阅读

2019-11-12 Comments (0)
阅读全文

什么是PAC文件

什么是PAC文件?

PAC文件是在使用代理服务器的时候,告诉浏览器该如何选择的一个配置文件。所以PAC文件又称为代理自动配置文件。

PAC文件实质上是JavaScript代码。

如何编写PAC文件

下面是一个最简单的PAC文件代码:

function FindProxyForURL(url[......]

继续阅读

2019-03-06 Comments (0)
阅读全文

HTML canvas框架汇总

HTML canvas的框架很多,而且侧重不同,比如 Three.js 是有名的3D框架,d3.js 偏重于数据展示。

名称
领域
框架
移动端
文档
其他

ThreeJS
3D
N
Y

强大的绘图引擎

playCanvas[……]

继续阅读

2019-01-07 Comments (4)
阅读全文

浏览器自动播放策略的应对

2019-01-03 Comments (0)
阅读全文

Google Web 更新(2017年6月):DOMException The play() request was interrupted

英文原文:DOMException: The play() request was interrupted

你是不是刚刚在Chrome浏览器的控制台Console里遇到了这个未预料的媒体错误?

Uncaught (in promise) DOMException: The play() re[......]

继续阅读

2019-01-03 Comments (0)
阅读全文

JavaSript模块规范:AMD规范与CMD规范介绍

JavaSript模块化

在了解AMD,CMD规范前,还是需要先来简单地了解下什么是模块化,模块化开发?

模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。可以想[……]

继续阅读

2018-08-23 Comments (0)
阅读全文

JavaScript的api设计原则

前言

本篇博文来自一次公司内部的前端分享,从多个方面讨论了在设计接口时遵循的原则,总共包含了七个大块。系卤煮自己总结的一些经验和教训。本篇博文同时也参考了其他一些文章,相关地址会在后面贴出来。很难做到详尽充实,如果有好的建议或者不对的地方,还望不吝赐教斧正。

一 接口的流畅性

好的接口是流畅易[……]

继续阅读

2018-08-23 Comments (1)
阅读全文

web客户端缓存机制

Readme

如果你已经熟悉客户端的缓存机制,可以直接跳过,看最后一节的代码规范。

Bug 场景

比如我们在服务器发布了一个页面:http://domain.com/cate/page.html

在这个页面当中我们引入了一个样式文件 style.css

    <link rel="[......]

继续阅读

2018-05-28 Comments (0)
阅读全文

移动端抓包及web调试指南

本文包括:

  1. 抓包(截获网络请求)
    • 在Windows上使用Fiddle抓包
    • 在Mac上使用Charles抓包
  2. 页面调试:
    • 在Windows上调试iOS
    • 在Windows上调试Android
    • 在Mac上调试iOS
    • 在Mac上调试Android

本文旨在解决的问题包括:

  1. 在电脑上通[……]

    继续阅读

2018-05-09 Comments (0)
阅读全文

JavaScript需要特别注意的地方

1 转换

parseInt(0.000001)  // 0
parseInt(0.0000001)  // 1

'5' == 5  // true

2 null

typeof null  // "object"

null == undefined  // true

10 + null[......]

继续阅读

2018-04-23 Comments (0)
阅读全文

小程序能力汇总

1 入口

  • 扫码或识别二维码(可以进入指定小程序指定某页面)
  • 分享到群/好友(可以进入指定小程序指定某页面)
  • 微信搜索框(搜索指定小程序,进入默认首页)
  • 微信首页下拉界面(进入最近使用过的小程序默认首页)
  • 关联公众号菜单(进入指定小程序)
  • 推送给用户的模板消息(指定小程序)
  • 同公众号的其他关联小程[……]

    继续阅读

前端 
2018-04-20 Comments (0)
阅读全文

JavaScript截取字符串slice()、substr()、substring()的区别

共同点

第二个参数都可以省略,省略以后都是截取到字符串最后。

区别

第一个参数
  • substring() 不能为负数
  • substr() 可以是负数,是负数从尾部开始计算
  • slice() 可以是负数,是负数从尾部开始计算
第二个参数
  • substring() 不能为负数,终点的位置,需要[……]

    继续阅读

2018-04-17 Comments (0)
阅读全文

微信内置浏览器H5如何清除缓存以及cookie和localStorage何时清除

UPDATE: 2021-01-20 20:01

背景

我们在开发微信 H5页面的时候经常会遇到资源文件(图片、css、js 等)不更新的问题,其实解决方案很简单,只要在请求地址之后加一个随机数参数即可:

<img src="./img/image-url-test.jpg?v20180[......]

继续阅读

2018-03-18 Comments (13)
阅读全文

一个典型的闭包方案,取for循环中i的值

有个网友问了个问题,如下的html,为什么每次输出都是5,而不是点击每个p,就alert出对应的1,2,3,4,5。

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; chars[......]

继续阅读

2018-02-23 Comments (0)
阅读全文

TOP