有时候，我们需要在网页判断用户是否处与非活跃状态，如果用户长时间没有在页面上进行任何操作，我们则判定该用户是非活跃的。在javascript中我们可以通过监听某些鼠标或键盘相关的事件来判定用户是否在活跃中。 案例演示 在线演示使用JS判断用户是否处于活跃状态 实现代码 案例演示了如何获取用户活跃状态，时间阈值定为5秒，超出该阈值没有操作表示非活跃，否则属于正在活跃中 html <pid="userState"></p> js //活跃状态，true活跃中，false非活跃 letstate=false; //定时器 lettimer=null; //非活跃判定阈值...

在前端开发过程中，调试的时候，我们会使用console.log等方式查看数据。但对于图片来说，仅靠展示的数据与结构，是无法想象出图片最终呈现的样子的。 虽然我们可以把图片数据通过img标签展示到页面上，或将图片下载下来进行预览。但这样的调试过程实在是复杂，何不实现一个console.image()呢？ 先上演示案例： 在线演示https://bi.cool/bi/W1P1cyq （chrome浏览器上演示效果） 实现console.image()： 参考Github上已实现的库https://github.com/adriancooney/console.imageStar1.8k(本文发布前...

笔.COOL，是一个最近在国内崭露头角的在线HTML/CSS/JS编辑器和作品分享平台。 笔.COOL提供了一个在线的HTML、CSS和JavaScript代码编辑器。无需任何安装，你只需打开网站，就可以开始编写前端代码。编辑器支持代码高亮、自动补全等功能，提高编码效率。笔.COOL还提供了实时预览功能，预览界面会随着你的代码更新进行实时刷新。   笔.COOL还为用户提供代码云端存储功能，当你登录后，编辑器会将你的项目自动同步保存到云端，这不仅避免了代码丢失的风险，还让你能够在任何时间、任何地点继续你的创作。   完成作品后，笔.COOL能让你轻松地将作品分享给他人，...

实现说明： 在JS中canvas原生没有支持对文字间距的调整，我们可以通过将文字的每个字符单独渲染来实现。本案例从CanvasRenderingContext2D对象的原型链上扩展了一个用于绘制带间距的函数fillTextWithSpacing()，使用方式与原生fillText()一致，除了多一个用于设置文字间距的参数。下面展示了详细用法。 效果展示： 在线演示https://bi.cool/bi/ObU1xOY 实现代码： html <canvasid="canvas"width='440'height="130"></canvas> javascript / 绘...