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

jQuery 简介

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

案例源码

<!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.mzph.cn/web/2321.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

毕业撒花 流感服务小程序的设计与实现

目录 1.1 总体页面设计 1.1.1 用户首页 1.1.2 新闻页面 1.1.3 我的页面 1.1.5 管理员登陆页面 1.1.6 管理员首页 1.2 用户模块 1.2.1 体检预约功能 1.2.2 体检报告功能 1.2.4 流感数据可视化功能 1.2.5 知识科普功能 1.2.6 疾病判断功能 1.2.7 出示个人就诊码功能 …

【笔试强训】day9

1.添加逗号 思路&#xff1a; 没思路 代码&#xff1a; #define _CRT_SECURE_NO_WARNINGS 1 #include <iostream> #include<string> #include<algorithm> using namespace std;int main() {string a;cin >> a;string ans;int p 1;for (int i a.si…

J8 inceptionv1

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 前言 卷积神经网络大家族中有很多经典的网络&#xff0c;前面已经学习resnet,densenet相关网络&#xff0c;今天学习一种更久远的一种网络GoogLenet 网络结构…

【Java--数据结构】模拟实现ArrayList

欢迎关注个人主页&#xff1a;逸狼 创造不易&#xff0c;可以点点赞吗~ 如有错误&#xff0c;欢迎指出~ 目录 LIst 顺序表ArrayList 顺序表优点 IList接口 ArrayList中定义要操作的数组 在MyArrayList中 重写接口方法 新增元素 在指定位置插入元素 pos不合法异常 判断和查找元素…

二维码相册怎么做?图片转换为二维码的方法

二维码现在可以用来承载大量的内容&#xff0c;通过扫描二维码即可通过扫描设备获取信息。图片生成二维码之后&#xff0c;用户可以在不保存图片直接扫码来查看图片&#xff0c;这种方式可以有效的提高图片的安全性&#xff0c;防止图片信息泄露。 怎么用二维码来作为相册展现…

STM32F401RCT6电子元器件芯片LQFP64 32位微控制器MCU单片机

STM32F401RCT6微控制器具有丰富的外设接口和较高的处理能力&#xff0c;适用于多种嵌入式应用。以下是一些典型的STM32F401RCT6应用案例&#xff1a; 1. 机器人控制&#xff1a;STM32F401RCT6可以用于制作自动导航机器人、遥控机器人等&#xff0c;负责处理传感器数据、控制电…

Centos7虚拟机与真机乎ping以及虚拟机ping不通的原因

虚拟机网络完全正常的标准 物理机可以ping通虚拟机的IP虚拟机可以ping通物理机的IP虚拟机可以ping通baidu.com等网站 使用工具版本&#xff1a;Centos7 前提&#xff1a; 虚拟机必须开机才可以连接访问 克隆出来的虚拟机一定要手动修改IP&#xff0c;IP冲突的情况下不能联网 …

android开发 使用Messenger进行进程间通信

Messenger有两个构造方法。 Messenger recevierMessenger new Messenger(IBinder target)&#xff1b; Messenger recevierMessenger new Messenger(Handler target)&#xff1b; 能传handler和ibinder&#xff0c; 服务端进程 com.jn.testmessagerservice 创建一个servic…

水位传感器优点有哪些

水位传感器是一种用于检测液体水位的重要设备&#xff0c;在各种工业和民用场景中起着至关重要的作用。其中&#xff0c;光学液位传感器作为一种先进的水位检测技术&#xff0c;在市场上备受青睐&#xff0c;其优点主要包括以下几个方面。 光学液位传感器内部所有元器件均经过…

基于一款最多能够支持10000路的 modbus RS485 led灯光控制板做灯控程序

背景 介绍一款之前用过的一款设备&#xff0c;基于RS485通讯协议&#xff0c;控制LED灯或RGB灯带。 设备介绍 之前用它来做智能中药柜的灯控板&#xff0c;结合物联网网关&#xff0c;modbus采集&#xff0c;mqtt转发&#xff0c;以及mqtt的rpc指令下发 设备图片 功能说明 …

LPA算法简介

1. 背景 标签传播算法(Label Propagation Algorithm)是一种基于图的半监督学习方法&#xff0c;其基本思路是用已标记节点的标签信息去预测未标记节点的标签信息。 2. 算法流程 1. 为每个节点随机的指定一个自己特有的标签&#xff1b; 2. 逐轮刷新所有节点的标签&#xff0…

前沿论文 | LLM推理性能优化最佳实践

原文&#xff1a;安全验证 - 知乎​ 来源 题目&#xff1a;LLM Inference Performance Engineering: Best Practices 地址&#xff1a;https://www.databricks.com/blog/llm-inference-performance-engineering-best-practices 在这篇博文中&#xff0c;MosaicML工程团队分析了…

2024-4-22 群讨论:微服务启动预热相关

以下来自本人拉的一个关于 Java 技术的讨论群。关注公众号&#xff1a;hashcon&#xff0c;私信进群拉你 Hotspot JVM 进程启动后&#xff0c;流量到来的时候 JIT 吃掉很多 CPU&#xff0c;如何观察到&#xff1f; 很多途径都能观察到&#xff1a; top -Hp&#xff1a;这个需…

ApiHug 的初心-ApiHug101

视频 秒懂 ApiHug -019 HOPE &#x1f525; H.O.P.E.: Help other people excellent &#x1f49d; 是这个项目最初的初心 &#x1f917; ApiHug {Postman|Swagger|Api...} 快↑ 准√ 省↓ &#x1f3e0; gitee github search ApiHug ApiHug &#x1f917; ApiHug {Post…

云架构(五)BBF模式

BFF模式&#xff08;Backends for Frontends pattern&#xff09;- https://learn.microsoft.com/en-us/azure/architecture/patterns/backends-for-frontends。 创建单独的后台服务用以提供给特定的前端或者接口。当你希望避免为多个接口定制单独的后台时&#xff0c;此模…

7天录用!录用→检索仅21天!CCF推荐毕业神刊

本周投稿推荐 SSCI • 2/4区经管类&#xff0c;2.5-3.0&#xff08;录用率99%&#xff09; SCIE&#xff08;CCF推荐&#xff09; • 计算机类&#xff0c;2.0-3.0&#xff08;最快18天录用&#xff09; SCIE&#xff08;CCF-C类&#xff09; • IEEE旗下&#xff0c;1/2…

限时疯抢!阿里云服务器十大优惠活动合集,手慢无

限时疯抢&#xff01;阿里云服务器十大优惠活动合集&#xff0c;手慢无阿里云服务器优惠活动&#xff08;2024年最新整理&#xff09;&#xff0c;阿里云服务器优惠活动大全、2024阿里云优惠政策整理&#xff0c;包括官方优惠活动主会场、2024年4月优惠活动分为&#xff1a;免费…

服务器(Linux、AIX)监控软件【nmon】使用

目录 1.安装 2.使用 3.使用 4.采集数据 5.查看log&#xff08;根据结果&#xff0c;生成报表&#xff09; 6.分析结果 1.安装 apt-get install nmon 2.使用 输入nmon进入下面的界面 x Use these keys to toggle statistics on/off: …

牛客网刷题 | BC60 判断是不是字母

描述 KiKi想判断输入的字符是不是字母&#xff0c;请帮他编程实现。 输入描述&#xff1a; 多组输入&#xff0c;每一行输入一个字符。 输出描述&#xff1a; 针对每组输入&#xff0c;输出单独占一行&#xff0c;判断输入字符是否为字母&#xff0c;输出内容详见输出样例…

加密、解密、签名、验签、数字证书、CA浅析

一、加密和解密 加密和解密应用的很广&#xff0c;主要作用就是防止数据或者明文被泄露。 加解密算法主要有两大类&#xff0c;对称加密和非对称加密。对称加密就是加密和解密的密钥都是一个&#xff0c;典型的有AES算法。非对称加密就是有公钥和私钥&#xff0c;公钥可以发布…