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

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

news 2026/2/8 9:38:55

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 实现，在 width 和 height 都为 0 时，设置 border，便会呈现三角形。想要哪个方向的三角形，设置其他三边为透明即可。同时，可以通过调整不同边的宽度，来调整三角形的高度…...

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

每日一道算法题

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

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

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

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

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

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

Understanding Diffusion Models: A Unified Perspective（三） 文章概括文章概括引用： article{luo2022understanding,title{Understanding diffusion models: A unified perspective},author{Luo, Calvin},journal{arXiv preprint arXiv:…...

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

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

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

编程日记 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中，通常会向集合URI（例如 /v1/publishers/1/books ）发出GET请求，获取集合中资源的列表。面向资源设计（AIP…...

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

CSAPP学习：前言

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

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

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

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

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

KNN算法学习实践

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

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

数据可视化的图表

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

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

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

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

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

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

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

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

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

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

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

【Spring】Spring启示录

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

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

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

一、实验拓扑如图： 接口ip配置网络 ：10.17.12.* 10.17.13.* ，10.17.23.* 回环接口配置分别为 10.0.1.1 ，10.0.1.2，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格式的配置文件，你可以使用第三方库，比如 ini 或 config. 下面是一个使用 ini 库的示例，该库允许你读取和解析.ini文件。使用 ini 库添加依赖首先，你需要在你的 Cargo.toml 文件中添加 ini 库的依赖&am…...

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

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

#!/bin/bash# 检查是否传入必要的参数，若未传入参数则打印用法并退出 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学习资料一、引言在当今数字化的时代，编程已然成为一项极具价值的技能。而 Java 作为一门广泛应用于企业级开发、移动应用、大数据等众多领域的编程语言，吸引着无数初学者投身其中。当我们初次踏入 Java 编程的世界&…...

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

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

如果是单选那么全新的按钮应该隐藏或者不可编辑的状态。但是我没找到改变成不可编辑的方法，只能采取隐藏 <template><div><el-table ref"proTab…...

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

JavaSec-RCE

简介 RCE(Remote Code Execution)，可以分为:命令注入(Command Injection)、代码注入(Code Injection) 代码注入 1.漏洞场景：Groovy代码注入 Groovy是一种基于JVM的动态语言，语法简洁，支持闭包、动态类型和Java互操作性&#xff0c…...

编程新知 2026/2/8 6:37:39

python打卡day49

知识点回顾： 通道注意力模块复习空间注意力模块CBAM的定义作业：尝试对今天的模型检查参数数目，并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

C++：std::is_convertible

C++标志库中提供is_convertible，可以测试一种类型是否可以转换为另一只类型： template <class From, class To> struct is_convertible; 使用举例： #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

编程新知 2025/6/11 15:23:57

Zustand 状态管理库：极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库，特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。核心优势对比基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

编程新知 2026/1/26 19:01:00

Android 之 kotlin 语言学习笔记三（Kotlin-Java 互操作）

参考官方文档：https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java（供 Kotlin 使用） 1、不得使用硬关键字不要使用 Kotlin 的任何硬关键字作为方法的名称或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

编程新知 2026/2/8 0:33:04