开发技巧丨技术开发分享录

2024-05-17 08:24 · javascript ·

扫码赞助

小额赞助，以兹鼓励，您的每一份支持，都给我们无上的动力！

支付宝扫一扫
微信扫一扫

·

小程序

微信小程序

const isTextOverflowed = (element: any): boolean => {
  if (element) {
    return element.offsetWidth >= element.scrollWidth
  }
  return false
}

css条纹进度条

2024-03-12 12:41 · css ·

扫码赞助

小额赞助，以兹鼓励，您的每一份支持，都给我们无上的动力！

支付宝扫一扫
微信扫一扫

·

小程序

微信小程序

<style type="text/css">
 .progressbar {
    position: relative;
    width: 160px;
    height: 22px;
    background: linear-gradient(-90deg, #fff 36%, #000 28%, #000 67%, #fff 25%);
    background-size: 10px 22px;
 }
 .progress {
    position: absolute;
    z-index: 3;
    right: 0; 
    width: 30%;
  }
  .bg-status {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: linear-gradient(-90deg, #fff 36%, #088AFE 28%, #088AFE 67%, #fff 25%);
    background-size: 10px 22px;
  }
  .bg-normal,
  .progress {
    height: 100%;
    background: linear-gradient(-90deg, #fff 36%, #000 28%, #000 67%, #fff 25%);
    background-size: 10px 22px;
  }
</style>
<div class="progressbar">
  <div class="progress"></div>
  <div class="bg-status"></div>
  <div class="bg-normal"></div>
</div>

防止grid布局高度被撑开

2024-02-25 03:01 · javascript ·

扫码赞助

小额赞助，以兹鼓励，您的每一份支持，都给我们无上的动力！

支付宝扫一扫
微信扫一扫

·

小程序

微信小程序

.grid-item {
  overflow: hidden;
}

或通过 grid-auto-rows 限制行高范围

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(100px, auto);
}

宽度为1px但浏览器效果是2px解决

2024-02-01 06:21 · css ·

扫码赞助

小额赞助，以兹鼓励，您的每一份支持，都给我们无上的动力！

支付宝扫一扫
微信扫一扫

·

小程序

微信小程序

出现这个问题通常是由于设备的像素密度（DPI）或屏幕缩放因素导致的。

使用子像素单位（subpixel）：将宽度指定为子像素单位（例如 width: 0.5px; 或 width: 0.5em;）。这样可以使浏览器更精确地渲染元素的宽度，避免模糊或倍数显示的问题。
使用百分比宽度：考虑使用相对于父元素的百分比宽度来代替具体的像素值。例如，如果父元素的宽度为 100px，您可以尝试 width: 50%; 来表示 50% 的宽度。
使用 transform 缩放：在一些情况下，使用 CSS 的 transform 属性进行缩放操作可以解决像素显示问题。例如，可以尝试 transform: scaleX(0.5); 将元素的宽度缩放为原始宽度的一半。

隐藏Microsoft Edge浏览器密码框的眼睛图标

2023-11-17 06:32 · javascript ·

扫码赞助

小额赞助，以兹鼓励，您的每一份支持，都给我们无上的动力！

支付宝扫一扫
微信扫一扫

·

小程序

微信小程序

input[type="password"]::-ms-reveal {
  display: none;
}

JSON.parse的作用有哪些？

2023-11-16 03:07 · javascript ·

扫码赞助

小额赞助，以兹鼓励，您的每一份支持，都给我们无上的动力！

支付宝扫一扫
微信扫一扫

·

小程序

微信小程序

1、解析JSON字符串

JSON.parse('{"name": "tom"}') // {"name": "tom"}
JSON.parse('[1,2,3]') // [1,2,3]

2、转换成数字

JSON.parse('12') // 12

3、转换成布尔值

JSON.parse('false') // false

js无感删除url搜索部分，不刷新页面

2023-07-27 06:42 · javascript ·

扫码赞助

小额赞助，以兹鼓励，您的每一份支持，都给我们无上的动力！

支付宝扫一扫
微信扫一扫

·

小程序

微信小程序

如：把下面的网址

http://127.0.0.1:5173/?code=3b9cc36e&state=

改成

http://127.0.0.1:5173

通过以下方法即可

history.pushState(null, '网站标题', location.origin)

css给最后3个元素设置样式

2023-06-21 08:37 · css ·

扫码赞助

小额赞助，以兹鼓励，您的每一份支持，都给我们无上的动力！

支付宝扫一扫
微信扫一扫

·

小程序

微信小程序

a
b
c
d
e
f
g

<style>
  .demo-230621 li:nth-last-child(-n+3) {  /* 负号表示计算从后往前的位置 */
    color: #f00;
  }
</style>
<ul class="demo-230621">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
  <li>g</li>
</ul>

驼峰命名与横杠命名互转

2023-06-16 14:33 · javascript ·

扫码赞助

小额赞助，以兹鼓励，您的每一份支持，都给我们无上的动力！

支付宝扫一扫
微信扫一扫

·

小程序

微信小程序

驼峰转横杠：

'liuDeHua'.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase() // liu-de-hua

横杠转驼峰：

'liu-de-hua'.replace(/-([a-z])/g, (match, p1) => p1.toUpperCase()) // liuDeHua

canvas添加字本阴影

2023-06-08 06:37 · javascript ·

扫码赞助

小额赞助，以兹鼓励，您的每一份支持，都给我们无上的动力！

支付宝扫一扫
微信扫一扫

·

小程序

微信小程序

const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');

// 设置阴影样式
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 5;

// 绘制文本
ctx.font = '24px Arial';
ctx.fillText('Hello World', 50, 50);