JavaScript编写评分控件

编写一个评分控件,用一个单行5列的Table做评分控件,监听td的click事件,点击一个td的时候,将这个td及之前的td背景色变为红色,之后的td背景色变为白色。

关键代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {border: 1px solid #666;margin: 200px auto;padding: 30px;}td {border: 1px solid #333;width: 20px;height: 20px;}</style>
</head><body><table><tr><td></td><td></td><td></td><td></td><td></td></tr></table><script>var tds = document.querySelectorAll('td');for (let i = 0; i < tds.length; i++) {tds[i].style.backgroundColor = '#fff';tds[i].onclick = function () {for (let j = 0; j < tds.length; j++) {if (j <= i) {tds[j].style.backgroundColor = 'red';} else {tds[j].style.backgroundColor = '#fff';}}};}</script>
</body></html>

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

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

相关文章

HeidiSQL导出SQL文件

目前开发阶段的数据库可视化工具逐渐转为了HeidiSQL&#xff0c;本文讲一讲导出到sql文件的小细节&#xff0c;给自己做个记录补充。 安装或数据库可视化工具比较可参考&#xff1a; windows下全免费手动搭建php8mysql8开发环境及可视化工具安装 导出 原来用Navicat的时候&am…

对象数组与指针与引用

一.对象指针的使用 #include<iostream> using namespace std; class A{ public:A(int a){xa;}void show_a(){cout<<x<<endl;}private:int x; }; int main() { A ob&#xff08;2&#xff09;,*p;//声明A的对象和对象指针 ob.show_a();//利用对象名访问对象的…

什么是面向对象【大白话Java面试题】

什么是面向对象 同样是解决一个问题&#xff0c;面向对象的角度是将问题抽象成对象的形式。通过分类的思维方式&#xff0c;将问题分成几个解决方案的对象。给每个对象赋值属性和方法&#xff0c;对每个对象的细节进行面向过程的思维&#xff0c;执行自己的方法来解决问题。 …

接口测试vs功能测试

接口测试和功能测试的区别&#xff1a; 本文主要分为两个部分&#xff1a; 第一部分&#xff1a;主要从问题出发&#xff0c;引入接口测试的相关内容并与前端测试进行简单对比&#xff0c;总结两者之前的区别与联系。但该部分只交代了怎么做和如何做&#xff1f;并没有解释为什…

[2023] 14届

1.日期统计 题意 1.日期统计 - 蓝桥云课 (lanqiao.cn) 思路 用dfs扫 对每一个位进行限制 花了一个小时 注意把答案枚举出来 对应一下看到底对不对 code #include<iostream> #include<cstdio> #include<stack> #include<vector> #include<al…

鸿蒙应用开发与鸿蒙系统开发哪个更有前景?

随后迎来了不少互联网公司与华为鸿蒙原生应用达成了合作&#xff0c;像我们常见的阿里、京东、小红书、得物……等公司&#xff0c;还有一些银行也都与华为鸿蒙达成了合作。使得一时之间市场紧缺鸿蒙开发人才&#xff0c;不少公司不惜重金争抢人才。 据智联招聘的最新数据显示…

Acwing 2868.子串分值 贡献法

对于一个字符串 S&#xff0c;我们定义 S 的分值 f(S) 为 S 中恰好出现一次的字符个数。 例如 f(“aba”)1&#xff0c;f(“abc”)3, f(“aaa”)0 现在给定一个字符串 S[0…n−1]&#xff08;长度为 n&#xff09;&#xff0c;请你计算对于所有 S 的非空子串 S[i…j](0≤i≤j…

Java使用数组实现栈、队列、堆

数组模拟栈&#xff1a; const int N 10010; // ******************** 栈 int stk[N], tt//tt是下标; // 插入 stk[k] x; // 删除 tt--; // 判断栈是否为空 if (tt > 0) not empty else empty // 栈顶 stk[tt]; // ******************** 队列 // 在队尾插入…

语音合成(TTS)开源调研与测评

2023年作为AI元年,各个领域的技术都有大规模的革新,语音领域的TTS(语音合成)也有很多新技术出现,比如Bert-Vits2、OpenVoice等等,都风靡一时。 笔者由于工作需要,近一个月在调研开源TTS,由于业务需要,主要看合成音频的效果(MOS)和合成速度(RTF)这两个指标,以及克…

关于vue2和vue3

Vue.js 是一个流行的前端框架&#xff0c;用于构建用户界面。Vue2 和 Vue3 是该框架的两个主要版本&#xff0c;它们之间存在一些关键的区别。下面我将详细介绍这两个版本的区别&#xff0c;并提供使用案例来说明这些区别。 响应式系统的底层实现&#xff1a; Vue2&#xff1a;…

nowcoder运维面试题集锦

TCP套接字中不会阻塞的是哪一种操作&#xff1f; 在TCP套接字中&#xff0c;不会阻塞的操作是绑定操作。具体来说&#xff0c;bind函数用于将特定的IP地址和端口号与套接字关联&#xff0c;这个操作本身并不引起阻塞。而其他一些操作&#xff0c;如读操作&#xff08;read、rea…

京西商城——商品相关接口开发

文章目录 接口开发django原生CBV开发商品分类菜单接口继承APIView开发商品类型分类接口通过序列化器开发商品详情接口 接口开发 django原生CBV开发商品分类菜单接口 先直接给出最终的views类&#xff0c;先简单的解释一下&#xff1a; 在基于CBV&#xff08;基于类视图的&am…

二维数组定义 求和,最值,求平均值 JS

定义二维数组 二维数组的求和&#xff0c;最值&#xff0c;求平均值 Eg1 // 二维数组 const matrix [[1, 2, 3],[4, 5, 6],[7, 8, 9] ];// 初始化求和、最大值和最小值 let sum 0; let max Number.MIN_VALUE; let min Number.MAX_VALUE;// 遍历二维数组 for (let i 0; i…

基于SSM的戒烟网站(有报告)。Javaee项目。ssm项目。

演示视频&#xff1a; 基于SSM的戒烟网站&#xff08;有报告&#xff09;。Javaee项目。ssm项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&#xff0c;通过Spring SpringMv…

c++20中的jthread再谈

一、介绍 在前面的C20新功能中&#xff0c;简单的介绍过相关的std::jthread的应用。当时觉得它虽然比std::thread方便一些&#xff0c;但也没有多大的优势。可在后面的不断的学习中&#xff0c;发现std::jthread的使用上确实有优秀之处&#xff0c;相对于传统的线程编程&#…

大数据学习-2024/3/30-MySQL基本语法使用介绍实例

学生信息表 create table studend(stu_id int primary key auto_increment comment 学生学号,stu_name varchar(20) not null comment 学生名字,mobile char(11) unique comment 手机号码,stu_sex char(3) default 男 comment 学生性别,birth date comment 出生日期,stu_time …

《操作系统导论》第15章读书笔记:机制:地址转换(address translation)

《操作系统导论》第15章读书笔记&#xff1a;机制&#xff1a;地址转换&#xff08;address translation&#xff09; —— 杭州 2024-03-30 夜 文章目录 《操作系统导论》第15章读书笔记&#xff1a;机制&#xff1a;地址转换&#xff08;address translation&#xff09;1.前…

正点原子imx6ull-mini不使用网络更新内核系统

参考视频&#xff1a;【【正点原子】Linux网络环境搭建篇】 参考文档&#xff1a;从正点原子官方下载 这几天在学imx6ull写网络驱动检测出网卡&#xff0c;但是一直ping不通ubuntu&#xff0c;电脑还有ubuntu、开发板都处于同一个网段&#xff0c;跟着正点原子的视频试了双网…

新一代信息技术元年汇总

元年汇总&#xff1a; 大数据 1998 区块链 2008 云计算 2012 RPA 2018 移动通信技术&#xff08;5G的元年&#xff09; 2019

DW1000 定位技术解析

Qorvo 的 DW1000 是一款完全集成的单芯片超宽带 (UWB) 低功耗、低成本收发器 IC&#xff0c;符合 IEEE 802.15.4a 标准。它可用于 2 向测距或 TDoA 定位系统&#xff0c;以 10 厘米的精度定位资产。它还支持速率高达 6.8 Mbps 的数据传输。DW1000 由一个包含一个接收器137和一个…