首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX  ›  cyrbuzz  ›  全部回复第 12 页 / 共 31 页
回复总数  619
1 ... 8  9  10  11  12  13  14  15  16  17 ... 31  
❮ ❯
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

感谢！
2021-07-29 14:11:45 +08:00
回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~
@Danswerme

嘘，可能会摸出奇怪的东西。
2021-07-29 14:10:47 +08:00
回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~
@zouzou0208

感谢支持~，有帮助就太好了，开心~。(ﾉ´▽｀)ﾉ♪
2021-07-29 14:09:37 +08:00
回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~
@mathzhaoliang

刚才看的时候就有点疑问，为什么要在 SVG 里写 canvas，直接在 html 里写不是更好，后面想到 SVG 的一大优势就是矢量图方便增删使用。看了大佬的数学仙境，只能说，大佬牛批，已加入 Star 里收藏吃灰。
2021-07-29 14:06:59 +08:00
回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~
@liyang5945

谢谢支持~。ヾ(ﾟ∀ﾟゞ)
2021-07-29 13:26:17 +08:00
回复了 cyrbuzz 创建的主题 › 分享创造 › 最近用几行 SVG 重构了一个之前用 Canvas 写了很多的动画，这里是一篇 SVG 的小分享~
@mathzhaoliang

每次觉得自己行了，就会有大佬给我上一课，这个特效也太酷了。
2021-07-28 11:45:58 +08:00
回复了 beryl 创建的主题 › 程序员 › 刷题有点刷不下去了，请假刷题经验心得
我个人的刷题经验是开始零启动，然后按套路刷。

比如今天刷链表，我会先找 easy 难度的链表(或者 easy 难度的其他题)，找到一个翻转链表，翻转链表我马上能想到是用新的内存空间，迭代一遍把值保存，然后生成一个翻转的新的链表。这样能跑通吗，肯定是 AC，AC 之后今天就算启动了，接下来可以继续优化成不用额外空间的，也可以再做其他题，然后重复这个过程....
2021-07-25 17:55:32 +08:00
回复了 DinoStray 创建的主题 › 问与答 › 鼓励中年人继续学习的话有哪些
求田问舍 ，怕应羞见，刘郎才气。
1 ... 8  9  10  11  12  13  14  15  16  17 ... 31  
❮ ❯
关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5771 人在线   最高记录 6679   ·     Select Language
创意工作者们的社区
World is powered by solitude
VERSION: 3.9.8.5 · 24ms · UTC 03:21 · PVG 11:21 · LAX 19:21 · JFK 22:21
Developed with CodeLauncher
♥ Do have faith in what you're doing.