【基于HTML5的网页设计及应用】——改变文字和背景颜色

🎃个人专栏:

🐬 算法设计与分析:算法设计与分析_IT闫的博客-CSDN博客

🐳Java基础:Java基础_IT闫的博客-CSDN博客

🐋c语言:c语言_IT闫的博客-CSDN博客

🐟MySQL:数据结构_IT闫的博客-CSDN博客

🐠数据结构:​​​​​​数据结构_IT闫的博客-CSDN博客

💎C++:C++_IT闫的博客-CSDN博客

🥽C51单片机:C51单片机(STC89C516)_IT闫的博客-CSDN博客

💻基于HTML5的网页设计及应用:基于HTML5的网页设计及应用_IT闫的博客-CSDN博客​​​​​​

🥏python:python_IT闫的博客-CSDN博客

🐠离散数学:离散数学_IT闫的博客-CSDN博客

​​​​​​🥽Linux:​​​​Linux_Y小夜的博客-CSDN博客

🚝Rust:Rust_Y小夜的博客-CSDN博客

欢迎收看,希望对大家有用!

目录

🎯功能简介

🎯代码解析

🎯核心代码

🎯效果展示


🎯功能简介

        这段代码实现的功能是让用户可以选择不同的文字样式,包括不同的背景色和文字颜色。用户可以通过单选按钮来选择不同的样式,选择不同的单选按钮会触发JavaScript中的`setColor()`函数,根据所选按钮的值改变`h1`元素的样式,从而实现所选样式的显示效果。整体来说,这段代码实现了一个简单的前端交互效果,让用户可以通过选择不同的样式来改变页面的外观。

🎯代码解析

<style>.txt1 {background-color: red;color: yellow;}.txt2 {background-color: green;/* color: #ccc; */}.txt3 {background-color: blue;color: white;}h1 {color: #f00;}
</style>

在这部分代码中,定义了三个类(.txt1, .txt2, .txt3)分别代表不同的背景色和文字颜色组合。此外,还设置了h1标签的文字颜色为红色。这些样式将在JavaScript中被应用到h1元素上。

<script>function setColor(){var h1 = document.getElementById("heading");var radio=document.getElementsByName("oColors");var checkedradio;for(var i=0;i<radio.length;i++){if(radio[i].checked){checkedradio=radio[i];break;}}switch(checkedradio.value){case "red":h1.className="txt1";break;case "green":h1.className="txt2";break;case "blue":h1.className="txt3";break;}}
</script>

这段JavaScript代码定义了一个setColor函数,用于根据用户选择的单选按钮来改变h1元素的样式。根据所选的单选按钮值,将h1元素的className属性设置为对应的类名(txt1, txt2, txt3),从而改变背景色和文字颜色。

<form id="form1" name="form1" method="post" action=""><p align="center">选择你喜欢的文字样式:<input type="radio" name="oColors" id="radio1" value="red" onclick="setColor();" /> 红背景,黄色文字<input type="radio" name="oColors" id="radio2" value="green" onclick="setColor();" /> 绿背景,红色文字<input type="radio" name="oColors" id="radio3" value="blue" onclick="setColor();" /> 蓝背景,白色文字</p>
</form>
<h1 id="heading" align="center" class="hh">我的班级是xxxx,我的姓名是xxx</h1>

在HTML部分,创建了一个包含三个单选按钮的表单,每个单选按钮用于选择不同的文字样式。当用户选择其中一个单选按钮时,onclick事件会触发setColor函数,从而改变h1元素的样式。

🎯核心代码

<form id="form1" name="form1" method="post" action=""><p align="center">选择你喜欢的文字样式:<input type="radio" name="oColors" id="radio1" value="red" onclick="setColor();" /> 红背景,黄色文字<input type="radio" name="oColors" id="radio2" value="green" onclick="setColor();" /> 绿背景,红色文字<input type="radio" name="oColors" id="radio3" value="blue" onclick="setColor();" /> 蓝背景,白色文字</p>
</form>
<h1 id="heading" align="center" class="hh">我的班级是xxxx,我的姓名是xxx</h1>

🎯效果展示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/744645.shtml

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

相关文章

有手就会Python自定义模块使用

1.自定义模块 自定义模块一般是在项目中根据自己的需求进行的封装 项目中自定义了额一个模块&#xff0c;module.py name "张三" age 23 weight 160 height 187 def test(): print("测试的方法") def demo(): print("天使的眼泪") …

html5cssjs代码 002 50以内的加法算式

html5&css&js代码 002 一些基本概念 50以内的加法算式 一、代码二、解释 50以内的加法算式。 一、代码 <!DOCTYPE html> <html lang"en"> <head><title>50以内的加法算式</title><meta charset"UTF-8"><m…

2024年Twitter上最值得关注的26名顶级程序员

2023年7月23日&#xff0c;在Twitter发布17年后&#xff0c;马斯克在Twitter上表示&#xff0c;是时候将该平台更名为X了。 对很多人来说&#xff0c;Twitter是一个分享他们对社会新闻或人生重大事件的想法的地方&#xff0c;这里也是紧跟文化潮流、获取全球最新消息的最佳方式…

如何更简捷地在 Java 中进行函数式编程

public static void findNemo(List names) { boolean found false; for(String name : names) { if(name.equals(“Nemo”)) { found true; break; } } if(found) System.out.println(“Found Nemo”); else System.out.println(“Sorry, Nemo not found”); } …

392.判断子序列

题目&#xff1a;给定字符串s和t&#xff0c;判断s是否为t 的子序列。 字符串的一个子序列是原始字符串删除一些字符而不改变剩余字符相对位置形成的新字符串。 解题思路&#xff1a;s是否是 t 的子序列&#xff0c;因此只要能找到任意一种 s 在 t 中出现的方式&#xff0c;即…

代码随想录day19(1)二叉树:完全二叉树节点个数(leetcode222)

题目要求&#xff1a;求一个完全二叉树的节点个数 思路&#xff1a;首先完全二叉树可以用普通二叉树的方法来求&#xff0c;但是需要遍历所有的节点。 但是对于完全二叉树来说&#xff0c;只有最底层右侧的节点可能没满&#xff0c;其余每层节点都达到了最大值。所以我们可以…

C++中PostMessage和SendMessage函数的用途、区别、使用方法及使用示例

在C的Windows编程中&#xff0c;PostMessage和SendMessage是用于进程间通信&#xff08;IPC&#xff09;的重要函数&#xff0c;特别是在同一应用程序的不同部分或不同应用程序之间发送消息时。这两个函数都用于向窗口发送消息&#xff0c;但它们在发送方式和行为上有所不同。 …

Nwatch在stm32上的移植

目录 Nwatch在stm32上的移植前言实验目的移植game1_task任务相关代码片段结果本文中使用的工程 Nwatch在stm32上的移植 本文目标&#xff1a;Nwatch在stm32上的移植 按照本文的描述&#xff0c;应该可以跑通实验并举一反三。 先决条件&#xff1a;装有编译和集成的开发环境&…

代码随想录算法训练营第四十四天|动态规划|完全背包、518. 零钱兑换 II、377. 组合总和 Ⅳ

完全背包 文章 一维 只有一个物品时 尽可能多装 dp[j]max( dp[j] (一般0) , dp[j-weight[0]]value[0] (要求j>weight[0]) ) 下一层 dp[j]max (dp[j] , dp[j-weight[i]] valuw[i] ) 从前往后遍历&#xff1a;因为腾一件value更高就腾&#xff0c;至于腾一件后里面包含几件都…

Vue-- 实现简单版 vue-router

实现简单版vue-router3 前置知识&#xff1a; 1、vue 插件机制 &#xff1a; vue.use(arg) arg可以是一个函数和对象&#xff0c;需要有一个install方法&#xff0c;如果是函数&#xff08;没有install方法&#xff09;&#xff0c;则直接执行该函数。install 方法第一个参数…

Linux进程状态

目录 1.R运行状态&#xff08;running&#xff09; 2.S睡眠状态&#xff08;sleep&#xff09; 3.T或t状态&#xff08;stopped 或 tracing stop&#xff09; 4.Z状态&#xff08;zombie&#xff09;&#xff08;僵尸进程&#xff09; 1.R运行状态&#xff08;running&…

exec 和 xargs 命令的用法区别,优缺点

exec 和 xargs 都是用于执行命令的工具&#xff0c;但它们有不同的特点、用法和优缺点。 exec 命令特点和用法&#xff1a; 特点&#xff1a; exec 命令是由 find 命令提供的一个选项&#xff0c;它允许在 find 命令查找到的文件上执行指定的命令。exec 将对 find 查找到的每一…

通过Spring Boot 实现页面配置生成动态接口?

流程介绍 在Spring Boot中实现页面配置生成动态接口通常涉及几个关键步骤: 设计页面配置:首先,你需要设计一个用户界面(UI),允许用户通过此界面来配置接口的各种参数,例如HTTP方法(GET、POST等)、URL路径、请求参数、响应数据格式等。保存配置信息:当用户通过页面配置…

Self-supervised Contextual Keyword and Keyphrase Retrieval with Self-Labelling

文章目录 题目摘要方法数据集实验 题目 通过自我标记进行自我监督的上下文关键字和关键词短语检索 论文地址&#xff1a;https://www.preprints.org/manuscript/201908.0073/v1 项目地址&#xff1a;https://github.com/naister/Keyword-OpenSource-Data 摘要 在本文中&#x…

2023 年江苏省职业院校技能大赛(中职)网络搭建与应用赛项公开赛卷——技能要求

2023 年江苏省职业院校技能大赛&#xff08;中职&#xff09;网络搭建与应用赛项公开赛卷——技能要求 2023 年江苏省职业院校技能大赛&#xff08;中职&#xff09; 网络搭建与应用赛项公开赛卷——技能要求 竞赛说明 1. 竞赛内容分布 “网络搭建与应用”竞赛共分五个部…

反向传播 — 简单解释

一、说明 关于反向传播&#xff0c;我有一个精雕细刻的案例计划&#xff0c;但是实现了一半&#xff0c;目前没有顾得上继续充实&#xff0c;就拿论文的叙述这里先起个头&#xff0c;我后面将修改和促进此文的表述质量。 二、生物神经元 大脑是一个由大约100亿个神经元组成的复…

寄存器(内存访问)

文章目录 寄存器&#xff08;内存访问&#xff09;1 内存中字的存储2 DS和[address]3 字的传送4 mov、add、sub指令5 数据段6 栈7 CPU提供的栈机制8 栈顶超界的问题9 push、pop指令10 栈段 寄存器&#xff08;内存访问&#xff09; 1 内存中字的存储 CPU中&#xff0c;用16位寄…

css的严格模式和混杂模式区别?

在网页开发中&#xff0c;CSS 的严格模式&#xff08;也称为标准模式&#xff09;和混杂模式&#xff08;也称为怪异模式或兼容模式&#xff09;是两种不同的渲染模式&#xff0c;它们影响了浏览器对网页的解析和渲染方式&#xff0c;下面是它们之间的主要区别&#xff1a; 严格…

pycharm安装配置运行py代码与命令行运行

命令行(winr cmd python) 三个小箭头表示可以运行py代码 什么是解释器 文字翻译二进制 你对电脑说 我爱你 电脑不知道什么意思 你对电脑说 111001101000100010010001 111001111000100010110001 111001001011110110100000 电脑便知道了你爱它 那么如何给计算机说这些二进制串…

C++中的STL-string类

文章目录 一、为什么学习string类&#xff1f;1.1 C语言中的字符串 二、准库中的string类2.2 string类2.3 string类的常用接口说明2.4 string类对象的容量操作2.5 string类对象的访问及遍历操作2.5 string类对象的修改操作2.7 string类非成员函数2.8 模拟实现string 一、为什么…