vs code 出现html js css 注释不正常

最近在做项目时,使用vs code进行注释时,只能注释成js可以识别的注释代码。如下

 

 

这样的注释html是不认的,自然是注释不成功,还会报错。

通过上网搜索,最终定位成是装的插件太多,造成有些快捷键冲突了。把vetur插件卸载之后再重新安装就可以了。

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
<!-- HTML部分 --> <body> <div class="container"> <div id="danmu"></div> </div> </body> <!-- CSS部分 --> <style> .container { width: 500px; height: 300px; position: relative; } #danmu { position: absolute; top: 50%; transform: translateY(-50%); font-size: 16px; white-space: nowrap; overflow: hidden; width: 100%; height: 100%; text-shadow: 1px 1px 2px #000; } .danmu-item { position: absolute; color: #fff; } </style> <!-- JS部分 --> <script> // 定义弹幕节点 class DanmuItem { constructor(text, speed) { // 创建节点并添加到父元素中 this.element = document.createElement('div'); this.element.classList.add('danmu-item'); this.element.innerText = text; document.querySelector('#danmu').appendChild(this.element); // 设置定位 const danmuWidth = this.element.clientWidth; const danmuHeight = this.element.clientHeight; const containerHeight = document.querySelector('.container').clientHeight; this.element.style.left = '100%'; this.element.style.top = Math.random() * (containerHeight - danmuHeight) + 'px'; // 设置移动动画 this.element.animate([ { left: '100%' }, { left: '-' + danmuWidth + 'px' }, ], { duration: speed * 1000, fill: 'both', }).onfinish = () => { // 移除节点 this.element.remove(); }; } } // 发送弹幕 function sendDanmu() { const input = document.querySelector('#input'); const text = input.value; if (text.trim() === '') { return; } const danmu = new DanmuItem(text, 6); input.value = ''; } window.onload = () => { // 监听回车事件,发送弹幕 document.addEventListener('keyup', (e) => { if (e.code === 'Enter') { sendDanmu(); } }); } </script> <!-- 1. HTML部分:结构只要一个用于容纳弹幕的div,id为danmu。 2. CSS部分:给容器设置宽、高、定位等样式,弹幕节点样式通过类名来定义。 容器里面的弹幕节点,利用CSS3的animation和transform来实现弹幕动画,并用text-shadow来增加弹幕字体轮廓。 3. JS部分:弹幕节点通过构造函数来实现,用animate设置弹幕移动动画,使用onfinish事件回调来移除节点。 发送弹幕通过监听回车键事件实现。 -->
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值