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

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

news 2025/9/18 11:38:26

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

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

编程新知 2025/8/21 16:44:19

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

编程新知 2025/9/6 0:09:27

如何为服务器生成TLS证书

TLS&#xff08;Transport Layer Security&#xff09;证书是确保网络通信安全的重要手段&#xff0c;它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书&#xff0c;可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...

编程新知 2025/9/11 5:41:27

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

编程新知 2025/9/18 1:39:03

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2025/9/13 17:42:18

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2025/9/13 17:38:50

push [特殊字符] present

push &#x1f19a; present 前言present和dismiss特点代码演示 push和pop特点代码演示 前言 在 iOS 开发中&#xff0c;push 和 present 是两种不同的视图控制器切换方式&#xff0c;它们有着显著的区别。 present和dismiss 特点 在当前控制器上方新建视图层级需要手动调用…...

编程新知 2025/9/5 8:29:07

【从零开始学习JVM | 第四篇】类加载器和双亲委派机制(高频面试题)

前言&#xff1a; 双亲委派机制对于面试这块来说非常重要&#xff0c;在实际开发中也是经常遇见需要打破双亲委派的需求&#xff0c;今天我们一起来探索一下什么是双亲委派机制&#xff0c;在此之前我们先介绍一下类的加载器。 目录 ​编辑 前言&#xff1a; 类加载器 1. …...

编程新知 2025/9/14 14:00:12

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

编程新知 2025/9/9 10:06:46