HTML使用jQuery实现两个点击按钮,分别控制改文本字体颜色和字体大小

embedded/2024/9/20 7:16:38/ 标签: html, jquery, 前端
htmledit_views">

jQuery 简介

jQuery 是一个广泛使用的 JavaScript 库,旨在简化对 HTML 文档的操作、事件处理、动画效果和 AJAX 等操作。

案例源码

html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Text Font Color and Size</title>
<style>#text {font-size: 16px;color: black;}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){// 控制字体颜色$("#color-btn").click(function(){var colors = ["red", "blue", "green", "orange", "purple"]; // 可以自定义颜色var randomColor = colors[Math.floor(Math.random() * colors.length)];$("#text").css("color", randomColor);});// 控制字体大小$("#size-btn").click(function(){var fontSize = Math.floor(Math.random() * 20 + 16); // 16到35之间的随机字体大小$("#text").css("font-size", fontSize + "px");});
});
</script>
</head>
<body><button id="color-btn">Change Color</button>
<button id="size-btn">Change Size</button>
<p id="text">实例</p></body>
</html>

案例效果图

“Change Color”为变换字体颜色,“Change Size”为变换字体大小

 


http://www.ppmy.cn/embedded/10933.html

相关文章

Python网络爬虫项目开发实战:怎么处理下载缓存

注意:本文的下载教程,与以下文章的思路有相同点,也有不同点,最终目标只是让读者从多维度去熟练掌握本知识点。 下载教程:Python网络爬虫项目开发实战_下载缓存_编程案例解析实例详解课程教程.pdf 一、下载缓存的简介 在网络爬虫项目开发中,下载缓存是一个重要的优化手段,…

使用甘特图来做时间管理

在这个追求效率的时代,掌握高超的时间管理技能几乎等同于掌控了成功。事实上,时间就是金钱,更是稀缺资源。那么,如何高效地规划和利用时间呢?甘特图应该是您的必备武器之一。 甘特图(Gantt chart)名字虽然有些陌生,但它的使用范围确实广泛。无论是全职妈妈安排家务,还是上市公…

LLAMA 3的测试之旅:在GPT-4的阴影下前行

Meta终于发布了他们长期期待的LLAMA 3模型&#xff0c;这是一个开源模型&#xff0c;实际上提供了一系列新的功能&#xff0c;使得模型在回答问题时表现得更好。这对AI社区来说是一个真正的里程碑事件。 Meta正在发布新版本的Meta AI&#xff0c;这是一种可以在他们的应用程序和…

Nginx第1篇-安装和简单配置

Nginx可以做什么 可以做静态HTTP服务器做负载均衡做正向代理做反向代理 正向代理和反向代理 正向代理&#xff1a; 是一个位于客户端和目标服务器之间的服务器(代理服务器)&#xff0c;为了从目标服务器取得内容&#xff0c;客户端向代理服务器发送一个请求并指定目标&…

管理情绪方法【你的观点“稳定”你的情绪】

我们的理想是什么&#xff1f; 不断提升自己的层次&#xff0c;每个人的满意条件是不一样 自己对自己负责、情绪靠自己去调整 不敢认错&#xff0c;不是不认错、嘴巴推&#xff0c;内心要承认 人最可靠的是改变自己&#xff0c;不是改变别人 一切都是不一定的&#xff0c;即相…

PVE grub resue错误修复 lvmid BUG

服务器断电后启动不起来&#xff0c;显示grub resue 找了半天没有找到修复方法。看官方文档有一处Recovering from grub “disk not found” error when booting from LVM 极为类似。https://pve.proxmox.com/wiki/Recover_From_Grub_Failure 下面是处理过程。 使用PVE 6.4启…

基于SSM+Jsp+Mysql的电器网上订购系统

开发语言&#xff1a;Java框架&#xff1a;ssm技术&#xff1a;JSPJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包…

Java注解相关

Java注解相关 TableId注解RequiredArgsConstructor TableId注解 需要 import com.baomidou.mybatisplus.annotation.TableId; <!-- 各个依赖的版本号 --><properties><spring-boot.version>3.2.5</spring-boot.version><java.version>17</j…

关于pdf.js中文本坐标尺寸的使用

一个电子教材项目中有这样一个需求&#xff1a; 用户向网站上传一个PDF书籍后&#xff0c;网站可以对PDF书籍进行解析&#xff0c;并支持用户对PDF书籍的每一页做一些操作&#xff0c;比如&#xff1a;为英语课本的单词和句子添加音频热区。因为热区数量很多&#xff0c;所以&a…

界面组件库DevExpress Office File API(WinForms WPF)v24.1新功能预览

本文描述了界面组件库DevExpress的Office File API&#xff08;WinForms & WPF&#xff09;和受Office启发的控件在v24.1中发布的一些功能&#xff0c;并详细介绍了我们当前的抢先体验预览版本v24.1中的内容。 DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满…

猴子摘桃问题(C语言)

一、N-S流程图&#xff1b; 二、运行结果&#xff1b; 三、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;int sum 1;int i 0;//运算&#xff1b;for (i 1; i < 10; i){//运算&#xff1b;sum …

【Linux开发 第十三篇】shell编程

shell编程 shell编程shell脚本函数 数据库备份 shell编程 对于后端开发&#xff0c;掌握shell编程是非常有必要的&#xff0c;可以对服务器进行维护&#xff0c;同时也可以对数据库进行操作 shell是一个命令解释器&#xff0c;它为用户提供了一个向Linux内核发送请求来运行的界…

YOLO的前世今生以及来龙去脉的背景介绍

YOLO&#xff08;You Only Look Once&#xff09;算法是一种流行的目标检测算法&#xff0c;它的核心思想是将目标检测任务转换为一个单次推断问题。与传统的目标检测方法不同&#xff0c;YOLO算法通过一个统一的神经网络同时预测图像中的目标位置和类别。这种设计使得YOLO能够…

oracle控制文件的管理

1 说明 Oracle数据库中的控制文件是数据库管理中的重要组成部分&#xff0c;是一个二进制小文件&#xff0c;在 mount 阶段被读取。它包含了数据库的元数据信息和文件位置等重要数据&#xff0c;记录数据库当前物理状态&#xff0c;维护数据库的一致性&#xff0c;记录 RMAN 备…

VSCode 配置 C/C++ 环境

1 安装 VSCode 直接去官网(https://code.visualstudio.com/)下载并安装即可。 2 配置C/C编译环境 方案一 如果是在Windows&#xff0c;需要安装 MingW&#xff0c;可以去官网(https://sourceforge.net/projects/mingw-w64/)下载安装包。 注意安装路径不要出现中文。 打开 w…

【力扣 Hot100 | 第七天】4.22(找到字符串中所有字母异位词)

文章目录 2.找到字符串中所有字母异位词2.1题目2.2解法&#xff1a;滑动窗口2.2.1解题思路2.2.2代码实现 2.找到字符串中所有字母异位词 2.1题目 给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺…

Java插值查找知识点(含面试大厂题和源码)

插值查找&#xff08;Interpolation Search&#xff09;是一种在有序数组中查找特定元素的搜索算法。它是基于二分查找&#xff08;Binary Search&#xff09;的改进版本&#xff0c;特别适合当数据分布均匀时使用。插值查找的关键思想是利用数据的分布特性&#xff0c;预测要查…

企业海外网络解决方案分析与比较

在当今全球化的商业环境中&#xff0c;高效的企业海外网络连接变得至关重要。针对企业海外网络方案&#xff0c;需要综合考虑网络连接、安全性、地理位置和合规性等多方面因素。如何有效解决这些问题&#xff0c;将直接影响企业的国际业务运作及数据安全。以下是对企业网络方案…

FLASH中sector、block、page的区别和联系

在FLASH存储介质中&#xff0c;sector&#xff08;扇区&#xff09;、block&#xff08;块&#xff09;和page&#xff08;页&#xff09;是三个重要的概念&#xff0c;它们代表了不同级别的逻辑分区或数据单元。 首先&#xff0c;page&#xff08;页&#xff09;是FLASH存储器…

广州大学《软件工程》实验报告三软件设计

广州大学学生实验报告&#xff08;三&#xff09; 开课学院及实验室&#xff1a; 学院 年级/专业/班 姓名 学号 实验课程名称 软件工程导论实验 成绩 实验项目名称 软件设计 指导老师 一、实验目的 掌握软件设计建模技术&#xff0c;能够撰写软件设计文…