文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

首页 > web前端 > js教程 > 正文

javascript+css好多网站用的选星星实现打分功能的函数_表单特效

php中文网

发布： 2016-05-16 19:04:46

原创

1031人浏览过

函数有两个参数，功能如下：
obj： img标签组的父容器，类型为DOM对象；
oEvent： event对象。
这个函数的优点是html代码可以很简洁，使用图片也可以很少，只需要两张图片。事件句柄只需要写在img的父容器上即可。演示用的图片我用的是绝对地址，各位在使用的时候改成网站的相对地址就可以了。当我们点击的时候，我用的是个alert事件。事实上，我们会在这个地方用个ajax方法，把相关的参数传到服务器端。只要把alert(this._num+1)写成sendAjax(this._num+1)就可以了。
需要的两张图片：

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>本站_www.jb51.net_阿当制作选星星打分</title>
<style type="text/<a style=" color: text-decoration:underline title="css" href="https://www.php.cn/zt/15716.html" target="_blank">css"> 
.starWrapper{border:1px solid #FFCC00;padding:5px;width:70px;} 
.starWrapper img{cursor:pointer;} 
</style>
<script type="text/javascript"> 
function rate(obj,oEvent){ 
//================== 
// 图片地址设置 
//================== 
var imgSrc = 'http://www.jb51.net/upload/20080508122008586.gif'; 
var imgSrc_2 = 'http://www.jb51.net/upload/20080508122010810.gif'; 
//--------------------------------------------------------------------------- 
if(obj.rateFlag) return; 
var e = oEvent || window.event; 
var target = e.target || e.srcElement;  
var imgArray = obj.getElementsByTagName("img"); 
for(var i=0;i<imgArray.length;i++){ 
   imgArray[i]._num = i; 
   imgArray[i].onclick=function(){ 
    if(obj.rateFlag) return; 
    obj.rateFlag=true; 
    alert(this._num+1); 
   }; 
} 
if(target.tagName=="IMG"){ 
   for(var j=0;j<imgArray.length;j++){ 
    if(j<=target._num){ 
     imgArray[j].src=imgSrc_2; 
    } else { 
     imgArray[j].src=imgSrc; 
    } 
   } 
} else { 
   for(var k=0;k<imgArray.length;k++){ 
    imgArray[k].src=imgSrc; 
   } 
} 
} 
</script><p class="starWrapper" onmouseover="rate(this,event)"> 
          <img  src="http://www.jb51.net/upload/20080508122008586.gif" title="很烂" alt="javascript+css好多网站用的选星星实现打分功能的函数_表单特效" ><img  src="http://www.jb51.net/upload/20080508122008586.gif" title="一般" alt="javascript+css好多网站用的选星星实现打分功能的函数_表单特效" ><img  src="http://www.jb51.net/upload/20080508122008586.gif" title="还好" alt="javascript+css好多网站用的选星星实现打分功能的函数_表单特效" ><img  src="http://www.jb51.net/upload/20080508122008586.gif" title="较好" alt="javascript+css好多网站用的选星星实现打分功能的函数_表单特效" ><img  src="http://www.jb51.net/upload/20080508122008586.gif" title="很好" alt="javascript+css好多网站用的选星星实现打分功能的函数_表单特效" ></p>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

java速学教程(入门到精通)

java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

相关标签：

css

来源：php中文网

上一篇：js取得当前网址_javascript技巧下一篇：地震发生中逃生十大法则_时间日期

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

最新问题

js如何实现语音合成功能 js语音合成的4种调用方式 JavaScript实现语音合成的核心方法是使用WebSpeechAPI中的SpeechSynthesis接口。要检查浏览器是否支持语音合成，可使用if('speechSynthesis'inwindow)进行判断；创建并配置语音实例需通过SpeechSynthesisUtterance对象设置文本、语言、语速、音调和音量等参数；可通过speechSynthesis.getVoices()获取可用语音并动态生成选择列表；控制播放使用speak()、pause()、resume()和cancel(

2025-06-21 10:57:01

289

js如何获取当前时间戳获取时间戳的4种实现方式解析获取JavaScript当前时间戳的方法有：1.Date.now()，2.newDate().getTime()，3.newDate().valueOf()，4.+newDate()。其中Date.now()最推荐，兼容性好且简洁高效；其他方法虽语法不同但结果一致。时间戳转换为可读日期需借助Date对象，通过getFullYear、getMonth等方法获取年月日时分秒，或使用toLocaleDateString等格式化方法，也可借助第三方库如Day.js。时间戳用途广泛，包括生成唯一ID、缓存

2025-06-21 10:39:02

1001

js如何生成随机数随机数生成的5种常用方法详解 JavaScript生成随机数的核心方法是Math.random()，但需根据需求进行扩展。生成指定范围整数用Math.floor(Math.random()(max-min+1))+min；生成浮点数则直接缩放偏移；正态分布可用Box-Muller变换；安全场景应使用WebCryptoAPI；从数组选元素则用Math.floor(Math.random()array.length)索引；提升质量可引入外部熵源或复杂算法，避免用时间戳作为种子。

2025-06-21 10:21:02

521

js怎么实现轮播图效果 js实现轮播图的5个关键步骤讲解轮播图的实现主要包括HTML结构搭建、CSS样式设置、JS控制切换等步骤。1.HTML结构需要包含容器、图片列表、指示器和控制按钮；2.CSS需设置容器尺寸、隐藏溢出内容并使用flex布局排列图片，同时添加过渡动画；3.JS通过修改transform属性实现图片切换，并控制指示器状态同步更新；4.可添加自动轮播功能，使用setInterval定时切换图片；5.为提升交互体验，可添加触摸滑动支持，通过监听touchstart、touchmove、touchend事件实现滑动手势识别；6.性能优化方

2025-06-20 22:33:02

587

js如何控制音频播放 js音频播放控制的4个核心API详解要控制JavaScript中的音频播放，核心是利用HTML5的元素及其API。1.创建并获取元素；2.使用play()和pause()控制播放与暂停；3.通过volume属性调整音量；4.利用currentTime属性获取或设置播放时间；5.监听ended、timeupdate等事件；6.使用muted属性实现静音控制；7.设置loop属性实现循环播放；8.监听error事件处理加载错误；9.通过渐变volume值实现淡入淡出效果；10.使用标签或多格式支持实现浏览器兼容性。

2025-06-20 22:24:01

802

js如何实现数字滚动效果数字动态增长动画实现数字滚动效果的核心实现方式是使用JavaScript，主要有三种方法：1.使用requestAnimationFrame结合数学计算，性能好且控制灵活；2.利用CSSTransitions/Animations实现简单效果；3.使用第三方库如countUp.js，方便但依赖外部资源。推荐第一种方法，通过animateNumber函数在指定时间内平滑更新数字值，结合缓动函数（如easeOutQuad）提升自然度，并可通过调整动画时长、数字格式和颜色优化观感。处理精度问题可采用先放大再缩小的四舍五入

2025-06-20 20:48:02

842

js怎样实现图表数据展示使用ECharts实现动态数据可视化 ECharts是一个强大的JavaScript图表库，能实现各种数据可视化效果。首先，引入ECharts库到HTML文件中，接着创建DOM容器，使用echarts.init()初始化实例，并通过配置option对象设置图表参数，最后调用myChart.setOption()渲染图表；其次，动态更新数据可通过setInterval()定时修改数据并重新渲染；此外，ECharts提供丰富的图表类型，如折线图展示趋势、柱状图比较类别、饼图显示比例、散点图表现关系等；用户还可通过修改option对象自定

2025-06-20 19:48:02

983

js如何检测用户是否离线判断网络状态的4种检测技巧！ JavaScript检测用户是否离线主要通过以下方法：1.使用navigator.onLine属性，返回布尔值表示浏览器能否检测到网络连接，但无法确保可访问互联网；2.监听online和offline事件，实时响应网络状态变化；3.利用fetch或XMLHttpRequest发送请求验证真实联网能力；4.结合ServiceWorker实现离线缓存与请求拦截；5.针对间歇性网络连接，采用指数退避重试、设置请求超时、本地缓存等策略提升体验；6.克服navigator.onLine局限性可通过定期请求

2025-06-20 18:15:02

952

js安全xss防御措施_js安全xss防护方法详解 XSS防御的核心在于划分信任边界并严格校验用户输入。1.输入验证是第一道防线，应采用白名单限制输入类型、设置长度限制，并过滤或转义特殊字符，可借助HTMLPurifier等成熟库处理恶意HTML代码。2.输出编码同样关键，需根据输出位置选择不同编码方式：HTML编码用于网页内容、JavaScript编码用于脚本、URL编码用于链接、CSS编码用于样式。3.内容安全策略（CSP）通过HTTP头或meta标签限制资源加载来源，如限制脚本仅来自可信域名、禁止内联脚本、启用报告模式监控违规行为。4.其他

2025-06-20 17:15:01

941

JS怎么实现前端拖拽上传 5行代码完成拖放文件上传功能拖拽上传的核心在于监听dragenter、dragover、drop事件并阻止默认行为，随后读取文件并通过XMLHttpRequest或fetch上传。具体步骤为：1.获取drop区域并绑定事件；2.阻止默认浏览器行为；3.添加高亮与非高亮样式反馈；4.读取拖入的文件列表；5.使用FormData和XMLHttpRequest逐个上传文件。优化用户体验可从视觉反馈、进度条显示、文件类型校验、错误提示等方面入手。处理大文件需采用分片上传、WebWorker或第三方库。兼容性方面应检测API支持情况

2025-06-20 17:03:02

854

相关专题

更多>

热门推荐

开源免费商场系统

广告

热门教程

更多>

相关推荐

热门推荐

最新课程

ThinkPHP5快速开发企业站点[全程实录]

399827次学习
收藏
PHP Workerman 基础与实战：即时通讯聊天系统（ThinkPHP6）

51551次学习
收藏
Thinkphp3.2.3个人博客开发

212810次学习
收藏

最新下载

更多>

网站特效

网站源码

网站素材

前端模板

关于我们免责申明意见反馈讲师合作广告合作最新更新: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP中文网抖音号: 发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

PHP学习

技术支持

返回顶部