V2EX › cyrbuzz 的所有回复 › 第 12 页 / 共 32 页

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

1 ... 8 9 10 11 12 13 14 15 16 17 ... 32

❮

❯

2021-09-17 13:03:47 +08:00

回复了 Biwood 创建的主题 › 问与答 › 什么是“magic”代码？跟“语法糖”、“hack”、“奇技淫巧”有什么区别？

magic 对应隐式吧，框架在背后做了大量工作，不够透明，一眼看不出写的和编译渲染后的结果之间关联。

2021-09-15 10:37:00 +08:00

回复了 aizya 创建的主题 › JavaScript › js 怎么判断用户关闭了浏览器

道是有的，不过比较奇怪，要看用户是否接受。

昨天撸了一遍 Chrome 插件编写，其中有 tabs 权限与 window 权限(这个随便自己配)的插件，可以通过 tabs 的 onRemoved 和 window 的 onRemoved 事件监听到标签以及整个窗口的关闭，这样就可以感知到时 tab 的关闭还是窗口的关闭。

所以这个道可以是引导用户安装你的特定插件。

tabs remove https://developer.chrome.com/docs/extensions/reference/tabs/#method-remove

window remove https://developer.chrome.com/docs/extensions/reference/windows/

另外这种需求也比较好奇...

2021-09-13 16:46:13 +08:00

回复了 FrankFang128 创建的主题 › 分享创造 › 写给前端工程师看的函数式编程对话（系列文章）

半年后又读了几遍，收益很多，感谢~。

2021-09-10 10:41:41 +08:00

回复了 asilin 创建的主题 › 随想 › 工作 7 年，工资终于突破 2W，实现了自己结束北漂的第一个小目标，但晚了三年

厉害。

2021-09-10 10:28:20 +08:00

回复了 yazoox 创建的主题 › CSS › 请教一下， flexbox，子元素超出父元素空间的问题。

好像没看懂具体意图，如果绿框内容不能省略，滚动或者红框变高，如果绿框内容可以省略，直接省略就好了啊。

你的期望难道是绿框内容自动缩到红框剩余高度且内容不变吗= =...

2021-09-08 10:04:20 +08:00

回复了 y4nssss 创建的主题 › 问与答 › 有人推荐一下优质的个人博客吗？

小透明前排蹭一蹭:

https://github.com/HuberTRoy/myown

2021-08-31 13:56:11 +08:00

回复了 Danmo 创建的主题 › 阅读 › 话说你有多久没看书了？以及最近看完的是哪本？

上一本看完的是《世界尽头与冷酷仙境》，有一段时间没看书了。

2021-08-26 19:29:27 +08:00

回复了 CraneLiu 创建的主题 › 微信 › 想弄个接活群

前端，Python，爬虫，Y3lyYnV6eg==

2021-08-10 10:34:52 +08:00

回复了 CSGO 创建的主题 › 问与答 › JS 前端倒计时时间不准确如何解决?

@Biwood
@CSGO
@des

谢谢各位大佬的回复，感觉大佬们的回复没有解决我的疑问= =...可能是我理解力不够，我承认 CPU 处理不过来内容，掉帧情况等等都会有误差产生，否则也不会衍生出 raf, ric 这些按帧回调，空闲回调的 API 了。

但我还是不相信楼主这种代码都会产生 1s 的误差，所以做了一下测试，因为楼主没有贴 HTML 部分代码稍微还原了一下：

```
<body>
<div class="wifi-click">
</div>

<div id="explode-id">

</div>

<div id="nokit-id">

</div>

<div id="ownkit-id">

</div>

<div class="wifi-explode">

</div>

<div class="wifi-nokit">

</div>

<div class="wifi-ownkit">

</div>
</body>
<script>
function setNumber(elem, num) {
elem.innerText = `${num.toString().padStart(2, '0')}<br>${new Date()}`;
}

function countdown(elem, init) {
setNumber(elem, init);
return setInterval(() => {
let num = Number(elem.innerText.split('<br>')[0]);
let next = num - 1;
if (next < 0) next = init;
setNumber(elem, next);
}, 1000);
}
function init() {
var timeList = [
{ 'name': 'explode-id', 'node': 'wifi-explode', 'time': 60 },
{ 'name': 'nokit-id', 'node': 'wifi-nokit', 'time': 30 },
{ 'name': 'ownkit-id', 'node': 'wifi-ownkit', 'time': 35 }
];
timeList.forEach(function (item) {
clearInterval(parseInt(document.getElementById(item['name']).innerHTML));
document.getElementById(item['name']).innerHTML = countdown(document.getElementsByClassName(item['node'])[0], item['time']);
});
}
let wifiClick = document.getElementsByClassName('wifi-click')[0];
init();
wifiClick.addEventListener('click', () => {
init();
})

wifiClick.innerHTML = new Date()
</script>
```

在楼主代码基础上加了 new Date()方便观察，一开始这段代码确实会每分钟都比 new Date 慢一秒，此时我的电脑都处于 CPU 占用率 0~1%之间，记录 Performance 也没有发现异常。

直到注意到楼主的定时器代码里：

```
let next = num - 1;
if (next < 0) next = init;
```

当 next 小于 0 时才重置，这样就导致本应该 1 分钟 0~59,1~60 的循环变成了 0~60，多了一次....= =。

2021-08-09 17:53:53 +08:00

回复了 CSGO 创建的主题 › 问与答 › JS 前端倒计时时间不准确如何解决?

@Biwood

还是有点疑问，setTimeout 设置 0 会有最小 4ms 的延迟是清清楚楚在文档里写的，非活跃的标签在各个浏览器下对定时器也有节流在文档里也可以清楚看到，raf 非活跃不会执行。

我的疑问是仅从楼主代码来看，1000ms 这个为什么会有延迟，楼主的代码本身没有会阻塞很长时间的代码，楼主说 60 秒会慢 1 秒，也就是每次大概都会有 16.66ms 的延迟，为什么会有如此大的延迟？楼主定时器的内的代码：

```
let num = Number(elem.innerText);
let next = num - 1;
if (next < 0) next = init;
elem.innerText = num.toString().padStart(2, '0');
```

他怎么看都花不了 16ms 。

2021-08-09 15:35:56 +08:00

回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~

@apeople

确实，有一些需求用 svg 写舒适的不要不要的，就是用的时候得查，嘿嘿。

2021-08-09 13:34:22 +08:00

回复了 CSGO 创建的主题 › 问与答 › JS 前端倒计时时间不准确如何解决?

怎么感觉从理论上不会有误差呢，vant 的倒计时也是用的 raf 和 setTimeout 做的。就楼主这点代码还能阻塞到有误差？来个大佬解释一下。

从解决的角度来看，vant 内的秒级并不是 1s 执行一次，而是 1 秒执行 60 次(raf 或者 setTimeout 的模拟，或者用 requestIdleCallback 来找空闲时间的回调)，通过比对是否秒数一致来实现的。

2021-08-04 09:39:46 +08:00

回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~

@squallsdjl

战略性 thanks~。

2021-07-30 14:02:10 +08:00

回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~

@LeeReamond

这个很抱歉，我没有系统性的探索过 Canvas，都是跟着 MDN 的 Demo 撸的。

感觉你可以撩一下一楼的大佬，一楼大佬给的链接里是用的 Canvas 做的 3D 动画，博客里也都是 3D 动画。

2021-07-30 13:24:36 +08:00

回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~

@nznd

我自己是翻译了一下 http://tutorials.jenkov.com/svg/index.html 这个大佬的 SVG 教程，跟着走了一圈。

然后翻翻 MDN，找了一些现有的例子：

张鑫旭大佬的文章：

https://www.zhangxinxu.com/wordpress/2017/12/understand-svg-fedisplacementmap-filter/

https://www.zhangxinxu.com/wordpress/2021/07/svg-filter-shadow-css-blur/

好像有本书叫 SVG 精髓，还没买来看= =。

2021-07-30 13:21:55 +08:00

回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~

@pigzzz

感谢大佬支持~。

2021-07-30 13:21:29 +08:00

回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~

@LeeReamond

谢谢~。

SVG 可以和 JS 发生交互，最后一个红包雨的例子中就注册了一个单个红包的点击事件，以及仓库中的给任意元素添加水波纹效果的 SVG 其实是用 JS 做了一个 SVG 滤镜的帧动画。

SVG 的内容对用户也是透明的，我个人的理解中是没法做到像 Canvas 那样的无法仅从 DOM 中复制，但是用 SVG 是会增加识别难度的，像掘金 logo 的例子，第一个菱形我用的`polygon`实现：

```
<polygon points="165,0 180,15 165,30 150,15" fill="#1E80FF"></polygon>
```

可以很轻易的得到我写了 4 个点，然后组成的菱形，写成 CSS 可能就是写个 div 定义宽高背景色然后 rotate，获取的更容易，但同时 SVG 也可以写的很复杂：

```
<path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M15.0737 5.80396H15.0757L18.706 2.91722L15.0757 0.00406298L15.0717 0L11.4475 2.91112L15.0717 5.80193L15.0737 5.80396ZM15.0757 14.9111L15.0778 14.9091L24.4429 7.52057L21.9036 5.48096L15.0778 10.8664L15.0757 10.8685L15.0737 10.8705L8.2479 5.48502L5.71057 7.52463L15.0737 14.9132L15.0757 14.9111ZM15.0716 19.9614L15.0757 19.9593L27.614 10.066L30.1534 12.1056L24.449 16.6053L15.0757 24L0.243779 12.3047L0 12.1117L2.53936 10.0721L15.0716 19.9614Z" class="logo"/>
```

不跑一跑我是看不懂这一堆`path`到底会组成什么东西，所以应该会增加识别难度，在我的理解中，功防时增加攻击成本都是一项正收益的事情。

都是仅理论= =，还是一个 SVG 小菜鸟，哈哈。

2021-07-29 16:15:36 +08:00

回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~

@balabalaguguji

哎嘿(≖ᴗ≖)✧。

2021-07-29 16:14:59 +08:00

回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~

@xrr2016

谢谢~😘。

2021-07-29 15:11:15 +08:00

回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~

@justrand

感谢！

1 ... 8 9 10 11 12 13 14 15 16 17 ... 32

❮

❯