JavaScript开发小工具(ZoomIt、Inspection Lens、Xmind)、JavaScript开发小技巧(当前按钮高亮)

最新推荐文章于 2024-04-29 17:54:33 发布

Bulut0907

最新推荐文章于 2024-04-29 17:54:33 发布

阅读量400

点赞数 4

分类专栏： Javascript 文章标签： javascript ZoomIt Inspection Lens Xmind 当前按钮高亮

本文链接：https://blog.csdn.net/yy8623977/article/details/133295886

版权

Javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1. JavaScript开发小工具

1.1 ZoomIt

从ZoomIt的官网下载。如下所示：
下载ZoomIt

将下载的压缩包进行解压，直接运行ZoomIt64.exe即可

重点快捷键：

ctrl + 1 — 放大
ctrl + 2 — 画图
画图的时候按住ctrl是矩形
画图的时候按住tab是椭圆
画图的时候按字母可以改变颜色。r: 红色、b: 蓝色、g: 绿色、p: 粉色、o: 橙色

1.2 Inspection Lens

和VS Code的Error Lens类似。是一款把代码检查(错误、警告、语法问题)进行突出显示的一款IDEA插件

如重复定义变量num，就会提示Duplicate declaration，如下所示：

Inspection Lens插件效果

1.3 思维导图Xmind

快捷建：

enter: 新建同级主题进行编辑
tab: 新建下级主题进行编辑

还可以给主题设置填充色、图标等

2. JavaScript开发小技巧

2.1 当前按钮高亮

效果如下：有3个按钮

打开页面第一个按钮高亮
点击第二个按钮，第一个按钮不高亮，第二个按钮高亮
点击第三个按钮，第二个按钮不高亮，第三个按钮高亮

实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .pink {
            background-color: pink;
        }
    </style>
</head>
<body>

<button class="pink">按钮1</button>
<button>按钮2</button>
<button>按钮3</button>

<script type="text/javascript">

    let buttons = document.querySelectorAll('button')
    for(let i = 0; i < buttons.length; i++) {
        buttons[i].addEventListener('click', function() {
            // 取消其它按钮的粉色高亮
            document.querySelector('.pink').className = ''
            // 将当前按钮变成粉色高亮
            this.className = 'pink'
        })
    }

</script>

</body>
</html>

页面效果如下：
当前按钮高亮

Bulut0907

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript开发小工具(ZoomIt、Inspection Lens、Xmind)、JavaScript开发小技巧(当前按钮高亮)

和VS Code的Error Lens类似。是一款把代码检查(错误、警告、语法问题)进行突出显示的一款IDEA插件。将下载的压缩包进行解压，直接运行ZoomIt64.exe即可。还可以给主题设置填充色、图标等。效果如下：有3个按钮。
复制链接

扫一扫