JS DOM 五角星的评分效果

最新推荐文章于 2024-07-17 15:26:15 发布
最新推荐文章于 2024-07-17 15:26:15 发布
阅读量493 收藏
点赞数
分类专栏： javascript dom 文章标签： javascript dom html js w3c
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ywk666/article/details/39781203
版权
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>五角星评分效果</title>
    <script type="text/javascript">


        //获取元素的当前位置
        function getElement(arr, element) {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == element) {
                    return i;
                }


            }
            return -1;
        }


        function createStar() {
            var table = document.getElementById("table1");
            var tds = table.getElementsByTagName("td");
            for (var i = 0; i < tds.length; i++) {
                tds[i].onmouseover = function () {
                    var table = document.getElementById("table1");
                    var tds = table.getElementsByTagName("td");
                    var Count = getElement(tds, this);
                    if (Count != -1) {
                        for (var j = 0; j <= Count; j++) {
                            tds[j].innerText = '★';
                        }
                        for (var m = Count + 1; m < tds.length; m++) {
                            tds[m].innerText = '☆';
                        }
                    }
                };
            }
        }                                      
    </script>
</head>
<body οnlοad="createStar();">
    <table id="table1">
        <tr>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
            <td>
                ☆
            </td>
        </tr>
    </table>
</body>
</html>
ywk666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
五角星评分案例js
weixin_52594372的博客
03-03 431
【css】 * { padding: 0; margin: 0; } .comment { font-size: 40px; color: #ff16cf; } .comment li { float: left; } ul { list-style: none; } 【html】 <ul class="comment"> <li>☆</li> <li>☆</li> <
五角星评分案例
Rowse的博客
05-07 852
建立ul>li标签在li标签里面写上空心五角星文字 <body> <ulclass="comment"> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> <li>☆</li> </ul> </body> 设置好ul>li标签的属性 ...
封装星星评分
coisini1206的博客
09-06 530
封装星星评分
vue中实现星星评分组件
simoon's的博客
06-20 6657
以下代码做记录： &lt;template&gt; &lt;div class="star" :class="starSize"&gt; &lt;div v-for="(starType, index) in itemClasses" :key="index" class="star-item" :class="starType"&
JavaScript运用Canvas绘制五角星评分控件
qq_52499745的博客
08-18 564
运用Canvas去绘制出评分的效果
如何基于jQuery实现五角星评分
10-14
在实现五角星评分系统时，我们将利用jQuery提供的事件监听和DOM操作功能。 1. **鼠标经过事件（mouseenter）**： 当鼠标悬停在某个`<li>`元素（代表一个五角星）上时，我们需要改变当前星星及之前所有星星的状态为...
jquery五角星评分满分100分
05-30
当涉及到用户交互和反馈时，五角星评分系统是一个常见且实用的设计元素，它可以直观地展示用户对某个产品或服务的评价。在本教程中，我们将深入探讨如何使用jQuery实现一个五角星评分系统，该系统满分为100分。 ...
jquary-五角星评分
07-26
**jQuery五角星评分系统详解** 在Web开发中，用户评价和反馈系统是常见的功能之一，其中五角星评分系统尤为常见。它提供了一种直观、简洁的方式让用户体验评分过程，通常用于产品评价、电影评分或者服务评级等场景...
PHP+Mysql+JQuery+CSS五个栏目五角星评分功能
08-12
在IT行业中，构建一个基于PHP、MySQL、JQuery和CSS的五角星评分功能是一项常见的任务，它能够为用户提供直观的评价系统，增强网站或应用的互动性。在这个项目中，我们将探讨如何实现这样一个功能。 首先，我们从PHP...
jQuery的五角星评分插件.rar
07-16
jQuery作为一款强大的JavaScript库，提供了丰富的插件以实现各种交互效果，其中五角星评分插件就是其中之一。本文将深入探讨jQuery五角星评分插件的原理、实现方式以及实际应用。 首先，我们要理解jQuery五角星评分...
js实现星星评分功能的实现（逻辑思路）
克克克克业业的学习记录
11-29 1132
1.先得到要操作的网页元素的DOM对象 img的DOM对象，textarea的DOM对象 2.遍历图片的DOM对象集合，绑定事件， 绑定鼠标移上的事件，鼠标移开的事件 3.事件触发时，回调函数的执行 鼠标移上时，判断当前移上的图片是第几张图片， 获取当前图片的title属性 根据是第几张图，来决定如何切换图片 ① > 2 star2.png ② < 2 star1.png <...
JS实现简单的评分评星功能
mydreamhope的博客
01-11 5573
for (var i = 0; i < images.length; i++) { images[i].onmouseover = (function (num) { return function () { //再遍历一次所有的星鼠标左边的星变成黄色,有边变成灰色 for (var j = 0; j < images.length; j++
原生Javascript实现五角星评分
Shay_Lau的博客
06-19 1651
利用原生Javascript实现五角星评分,可以打半分.话不多说先上代码。html部分 &lt;div class="setgrade"&gt; &lt;div class="star"&gt; &lt;span id="star"&gt; &lt;li&gt; &l
JS 实现简单星星评分功能
mixi9760的博客
07-26 8030
思路调用onmouseover将经过的星星和之前的设置成红色 之后的设置成黑色代码<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document示例</title> </head> <body onload="test()"> <table id ="czy"> <tr>
js简单的五角星评分
随风的博客
06-01 2381
window.onload=function(){             //首先要获取图片,相当于装到一个数组里面             var star = document.getElementsByTagName("img");             //读取数组的索引             for(var i =0;i                 star[i].s
JS实现星星评分功能实例代码(两种方法)
茅坤宝骏氹的博客
08-05 8971
转载自   JS实现星星评分功能实例代码(两种方法) 一、方法1 1、用到图片   2、结构和样式 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &amp
js实现星级评分（第一种实现方式）
最有趣的编程
10-04 6809
1.新建一个Dynamic Web Project项目，里面新建一个jsp文件，加入一张评分星星图片，星星图片和整体框架如图所示： 2.index.jsp里面的代码如下所示： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
最新发布
OpenTiny的博客
07-17 1158
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
使用DOM实现五角星
02-12
要使用 DOM 实现五角星，需要使用 HTML 元素创建一个多边形，并使用 CSS 进行样式设置。 1. HTML 结构: 使用 `<div>` 元素创建一个容器，内部使用 `<svg>` 元素创建一个矢量图形。 ``` <div class="container"> <svg viewBox="0 0 100 100"> <!-- 五角星的 HTML 结构在这里 --> </svg> </div> ``` 2. 创建五角星: 使用 `<polygon>` 元素创建一个多边形，并通过 `points` 属性指定多边形的顶点。 ``` <polygon points="50,10 30,50 70,50 10,70 50,30 90,70 30,30 90,10 70,30 50,70 10,50 30,10 50,30 70,50 90,30 50,10"/> ``` 3. 设置样式: 使用 CSS 设置五角星的大小、颜色等样式。 ``` .container { width: 200px; height: 200px; } svg { width: 100%; height: 100%; } polygon { fill: red; } ``` 完整的代码如下： ``` <!DOCTYPE html> <html> <head> <style> .container { width: 200px; height: 200px; } svg { width: 100%; height: 100%; } polygon { fill: red; } </style> </head> <body> <div class="container"> <svg viewBox="0 0 100 100"> <polygon points="50,10 30,50 70,50 10,70 50,30 90,70 30,30 90,10 70,30 50,70 10,50 30,10 50,30 70,50 90,30 50,10"/> </svg> </div> </body> </html> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值