当前位置： 首页 > news >正文

js手撕 | 使用css画一个三角形 使用js修改元素样式 驼峰格式与“-”格式相互转化

news 2026/5/17 23:34:42

1.使用css画一个三角形

  • 借助 border 实现，在 width 和 height 都为 0 时，设置 border，便会呈现三角形。想要哪个方向的三角形，设置其他三边为 透明即可。
  • 同时，可以通过调整不同边的宽度，来调整三角形的高度和宽度。
<style>.box1 {width: 0;height: 0;content: '';border-right: 100px solid black;border-left: 100px solid transparent;border-top: 100px solid transparent;border-bottom: 100px solid transparent;}
</style><body><div class="box1"></div>
</body>

效果如下：
在这里插入图片描述

2. 如何使用js来实现：鼠标移入时修改元素的样式

法一：使用addEventListener

element = document.getElementById("box");element.addEventListener("mouseenter",()=>{element.style.backgroundColor = "pink";element.style.border = "1px solid black";
})
element.addEventListener("mouseleave",()=>{element.style.backgroundColor = "";element.style.border = "1px red solid";
})
// 单击事件
element.addEventListener("click", () => {alert("元素被单击了！");
});

法二：直接设置 onmouseenter 和 onmouseleave 属性

element = document.getElementById("box");element.onmouseenter = function () {this.style.backgroundColor = "lightblue";this.style.color = "white";
};element.onmouseleave = function () {this.style.backgroundColor = "";this.style.color = "";
};

3. 驼峰格式与“-”格式相互转化

3.1 “-”格式转化为驼峰格式

let str = "hello-world";
function fun(str){let temp = str.split('-');for(let i=1;i<temp.length;i++){let s = [...temp[i]];s[0] = s[0].toUpperCase();temp[i] = s.join("");}return temp.join("");
}
console.log(fun(str))   // helloWorld

3.2 驼峰格式转换为“-”格式

let str = "helloWorld";
function fun(str){let res = [];for(let i of str){if(i===i.toUpperCase()){res.push("-");res.push(i.toLowerCase());}else{res.push(i)}}return res.join("")
}
console.log(fun(str))    // hello-world

相关文章：

js手撕 | 使用css画一个三角形 使用js修改元素样式 驼峰格式与“-”格式相互转化

1.使用css画一个三角形 借助 border 实现&#xff0c;在 width 和 height 都为 0 时&#xff0c;设置 border&#xff0c;便会呈现三角形。想要哪个方向的三角形&#xff0c;设置其他三边为 透明即可。同时&#xff0c;可以通过调整不同边的宽度&#xff0c;来调整三角形的高度…...

编程日记 2025/1/28 14:19:16

每日一道算法题

题目&#xff1a;最长递增子序列的个数 给定一个未排序的整数数组&#xff0c;找到最长递增子序列的个数。 示例 1 输入&#xff1a;nums [1,3,5,4,7]输出&#xff1a;2解释&#xff1a;有两个最长递增子序列&#xff0c;分别是 [1,3,4,7] 和 [1,3,5,7] 。 示例 2 输入&a…...

编程日记 2025/1/28 14:18:12

低代码系统-产品架构案例介绍、明道云（十一）

明道云HAP-超级应用平台(Hyper Application Platform)&#xff0c;其实就是企业级应用平台&#xff0c;跟微搭类似。 通过自设计底层架构&#xff0c;兼容各种平台&#xff0c;使用低代码做到应用搭建、应用运维。 企业级应用平台最大的特点就是隐藏在冰山下的功能很深&#xf…...

编程日记 2025/1/28 14:17:10

论文笔记（六十三）Understanding Diffusion Models: A Unified Perspective（三）

Understanding Diffusion Models: A Unified Perspective&#xff08;三&#xff09; 文章概括 文章概括 引用&#xff1a; article{luo2022understanding,title{Understanding diffusion models: A unified perspective},author{Luo, Calvin},journal{arXiv preprint arXiv:…...

编程日记 2025/1/28 14:15:57

利用机器学习创建基于位置的推荐程序

推荐系统被广泛应用于不同的应用程序中&#xff0c;用于预测用户对产品或服务的偏好或评价。在过去的几分钟或几小时里&#xff0c;你很可能在网上遇到过或与某种类型的推荐系统进行过互动。这些推荐系统有不同的类型&#xff0c;其中最突出的包括基于内容的过滤和协作过滤。在…...

编程日记 2025/1/28 14:07:39

每日一题 429. N 叉树的层序遍历

429. N 叉树的层序遍历 /*class Solution { public:vector<vector<int>> levelOrder(Node* root) {queue<Node*> que;que.push(root);vector<vector<int>> ans;if(root nullptr){return ans;}while(!que.empty()){int sizeQue que.size();vec…...

编程日记 2025/1/28 14:06:23

AIP-132 标准方法：List

编号132原文链接AIP-132: Standard methods: List状态批准创建日期2019-01-21更新日期2022-06-02 在许多API中&#xff0c;通常会向集合URI&#xff08;例如 /v1/publishers/1/books &#xff09;发出GET请求&#xff0c;获取集合中资源的列表。 面向资源设计&#xff08;AIP…...

编程日记 2025/1/28 14:05:11

CSAPP学习：前言

前言 本书简称CS&#xff1a;APP。 背景知识 一些基础的C语言知识 如何阅读 Do-做系统 在真正的系统上解决具体的问题&#xff0c;或是编写和运行程序。 章节 2025-1-27 个人认为如下章节将会对学习408中的操作系统与计算机组成原理提供帮助&#xff0c;于是先凭借记忆将其简单…...

编程日记 2025/1/28 14:02:58

【统计的思想】假设检验（二）

假设检验是根据人为设定的显著水平&#xff0c;对被测对象的总体质量特性进行统计推断的方法。 如果我们通过假设检验否定了零假设&#xff0c;只是说明在设定的显著水平下&#xff0c;零假设成立的概率比较小&#xff0c;并不是说零假设就肯定不成立。如果零假设事实上是成立…...

编程日记 2025/1/28 13:59:48

KNN算法学习实践

1.理论学习 原文链接 ShowMeAI知识社区 2.案例实践 假如一套房子打算出租&#xff0c;但不知道市场价格&#xff0c;可以根据房子的规格&#xff08;面积、房间数量、厕所数量、容纳人数等&#xff09;&#xff0c;在已有数据集中查找相似&#xff08;K近邻&#xff09;规格…...

编程日记 2025/1/28 13:58:47

数据可视化的图表

1.折线图反映了一段时间内事物连续的动态变化规律,适用于描述一个变量随另一个变量变化的趋势,通常用于绘制连续数据,适合数据点较多的情况。 2.散点图是以直角坐标系中各点的密集程度和变化趋势来表示两种现象间的相关关系&#xff0c;常用于显示和比较数值。当要在不考虑时间…...

编程日记 2025/1/28 13:57:45

动手学深度学习-卷积神经网络-3填充和步幅

目录 填充 步幅 小结 在上一节的例子&#xff08;下图&#xff09; 中&#xff0c;输入的高度和宽度都为3&#xff0c;卷积核的高度和宽度都为2&#xff0c;生成的输出表征的维数为22。 正如我们在 上一节中所概括的那样&#xff0c;假设输入形状为nhnw&#xff0c;卷积核形…...

编程日记 2025/1/28 13:55:39

【JS|第28期】new Event()：前端事件处理的利器

日期&#xff1a;2025年1月24日 作者&#xff1a;Commas 签名&#xff1a;(ง •_•)ง 积跬步以致千里,积小流以成江海…… 注释&#xff1a;如果您觉得有所帮助&#xff0c;帮忙点个赞&#xff0c;也可以关注我&#xff0c;我们一起成长&#xff1b;如果有不对的地方&#xf…...

编程日记 2025/1/28 13:48:30

Spring Boot 中的事件发布与监听：深入理解 ApplicationEventPublisher（附Demo）

目录 前言1. 基本知识2. Demo3. 实战代码 前言 &#x1f91f; 找工作&#xff0c;来万码优才&#xff1a;&#x1f449; #小程序://万码优才/r6rqmzDaXpYkJZF 基本的Java知识推荐阅读&#xff1a; java框架 零基础从入门到精通的学习路线 附开源项目面经等&#xff08;超全&am…...

编程日记 2025/1/28 13:45:26

【Spring】Spring启示录

目录 前言 一、示例程序 二、OCP开闭原则 三、依赖倒置原则DIP 四、控制反转IOC 总结 前言 在软件开发的世界里&#xff0c;随着项目的增长和需求的变化&#xff0c;如何保持代码的灵活性、可维护性和扩展性成为了每个开发者必须面对的问题。传统的面向过程或基于类的设计…...

编程日记 2025/1/28 13:43:23

ospf动态路由配置，cost路径调整，ospf认证实验

一、实验拓扑如图&#xff1a; 接口ip配置网络 &#xff1a;10.17.12.* 10.17.13.* &#xff0c;10.17.23.* 回环接口配置分别为 10.0.1.1 &#xff0c;10.0.1.2&#xff0c;10.0.1.3对应三台路由器 ar1配置接口ip interface GigabitEthernet0/0/0 ip address 10.17.12.1…...

编程日记 2025/1/28 13:40:20

在Rust应用中访问.ini格式的配置文件

在Rust应用中访问.ini格式的配置文件&#xff0c;你可以使用第三方库&#xff0c;比如 ini 或 config. 下面是一个使用 ini 库的示例&#xff0c;该库允许你读取和解析.ini文件。 使用 ini 库 添加依赖 首先&#xff0c;你需要在你的 Cargo.toml 文件中添加 ini 库的依赖&am…...

编程日记 2025/1/28 13:39:07

批量处理多个模型的预测任务

#!/bin/bash# 检查是否传入必要的参数&#xff0c;若未传入参数则打印用法并退出 if [ "$#" -lt 1 ]; thenecho "用法: $0 <file_path>"echo "示例: $0 /home/aistudio/work/PaddleSeg/city/cityscapes_urls_extracted.txt"exit 1 fi# 读取…...

编程日记 2025/1/28 13:36:01

Java 编程初体验

Java学习资料 Java学习资料 Java学习资料 一、引言 在当今数字化的时代&#xff0c;编程已然成为一项极具价值的技能。而 Java 作为一门广泛应用于企业级开发、移动应用、大数据等众多领域的编程语言&#xff0c;吸引着无数初学者投身其中。当我们初次踏入 Java 编程的世界&…...

编程日记 2025/1/28 13:31:52

element-plus 的table section如何实现单选

如果是单选那么全新的按钮应该隐藏或者不可编辑的状态。但是我没找到改变成不可编辑的方法&#xff0c;只能采取隐藏 <template><!-- 注意要包一层div根元素&#xff0c;否则css样式可能会不生效&#xff0c;原因不详 --><div><el-table ref"proTab…...

编程日记 2025/1/28 13:28:44

终极指南：如何使用Autoclick实现Mac自动点击900次/秒

终极指南&#xff1a;如何使用Autoclick实现Mac自动点击900次/秒 【免费下载链接】Autoclick A simple Mac app that simulates mouse clicks 项目地址: https://gitcode.com/gh_mirrors/au/Autoclick 你是否厌倦了重复性的鼠标点击工作&#xff1f;无论是游戏中的重复操…...

编程新知 2026/5/17 9:48:58

OpenCore Legacy Patcher终极指南：让老Mac免费运行最新macOS的完整教程

OpenCore Legacy Patcher终极指南&#xff1a;让老Mac免费运行最新macOS的完整教程 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher OpenCore Legacy Patcher是…...

编程新知 2026/5/17 9:38:28

2019 年旧作升级！用木材与电路打造更美观的电压表时钟

2019 年旧作升级&#xff01;用木材与电路打造更美观的电压表时钟早在 2019 年&#xff0c;作者制作了一个简单的电压表时钟&#xff0c;这类时钟使用模拟面板电压表来显示时间&#xff0c;而非传统钟面。不过&#xff0c;网上大多数此类设计过于复杂且不太美观&#xff0c;于是…...

编程新知 2026/5/17 9:29:04

Godot卡牌游戏框架终极指南：3小时从零构建专业级卡牌游戏

Godot卡牌游戏框架终极指南&#xff1a;3小时从零构建专业级卡牌游戏 【免费下载链接】godot-card-game-framework A framework which comes with prepared scenes and classes to kickstart your card game, as well as a powerful scripting engine to use to provide full r…...

编程新知 2026/5/17 9:14:34

低多边形≠简陋！掌握这7个结构化Prompt技巧，3分钟产出可商用IP形象（附Figma网格对齐校验表）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;低多边形设计的认知革命&#xff1a;从“简陋感”到“结构化美学” 低多边形&#xff08;Low-Poly&#xff09;设计曾长期被误读为建模能力不足的妥协产物&#xff0c;但其本质是一场对数字视觉语法的系…...

编程新知 2026/5/17 8:17:32

构建轻量级LLM工具集：模块化设计、多模型集成与本地化部署实践

1. 项目概述&#xff1a;一个面向日常的轻量级LLM工具集最近在GitHub上闲逛&#xff0c;发现了一个挺有意思的项目&#xff0c;叫“Daily-LLM”。光看名字&#xff0c;你可能会觉得这又是一个庞大的、需要海量算力才能跑起来的“大模型”项目。但点进去仔细研究后&#xff0c;我…...

编程新知 2026/5/17 7:58:17

CircuitPython嵌入式游戏开发：基于TileGrid的迷宫寻蛋与JSON数据持久化实践

1. 项目概述与核心价值如果你和我一样&#xff0c;对嵌入式开发充满热情&#xff0c;同时又对游戏开发抱有好奇心&#xff0c;那么将两者结合——在微控制器上编写一个完整的2D游戏——绝对是一次令人兴奋的挑战。这不仅仅是让LED闪烁或读取传感器数据&#xff0c;而是要在资源…...

编程新知 2026/5/17 6:38:35

基于PyPortal与CircuitPython的物联网游戏数据显示器开发实战

1. 项目概述 如果你和我一样&#xff0c;既是《英雄联盟》的忠实玩家&#xff0c;又对嵌入式硬件开发充满热情&#xff0c;那么把这两者结合起来&#xff0c;做一个能实时展示自己召唤师等级的“实体奖杯”&#xff0c;绝对是一件既酷又有成就感的事情。这个项目就是基于Adafr…...

编程新知 2026/5/17 6:21:30

AI项目脚手架：标准化与自动化提升工程效率

1. 项目概述&#xff1a;一个为AI项目量身定制的“脚手架”如果你和我一样&#xff0c;在AI领域摸爬滚打多年&#xff0c;从早期的机器学习模型到现在的深度学习、大语言模型应用&#xff0c;肯定经历过无数次从零开始搭建项目的“阵痛”。每次新建一个项目&#xff0c;都要重复…...

编程新知 2026/5/17 5:42:12

NeoPixel光剑制作全攻略：从WS2812B原理到实战装配

1. 项目概述&#xff1a;从零件到光剑的旅程如果你和我一样&#xff0c;是个对《星球大战》里的光剑毫无抵抗力&#xff0c;同时又喜欢动手折腾电子玩意儿的人&#xff0c;那么用NeoPixel灯带自制一把会发光、能变色的光剑&#xff0c;绝对是件充满成就感的事。这不仅仅是把灯塞…...

编程新知 2026/5/17 5:08:33