js实现星星打分效果的方法


Posted in Javascript onJuly 05, 2020

本文实例讲述了js实现星星打分效果的方法。分享给大家供大家参考。具体分析如下:

很多网站都有如下图这样的星星打分效果,今天就看下用js怎么实现打分效果。

js实现星星打分效果的方法

效果详解
1. 鼠标移上的时候星星点亮,下面的文字显示。鼠标移出的时候星星为灰,下面文字不显示。
2. 鼠标移到某个星星上,它之前的所有星星都会亮。
3. 鼠标移到某个星星上并点击,会显示打分结果。
 
代码如下

<!doctype html>
<html>
<head>
 <meta charset="gbk"> 
 <title>切换</title>
 <style>
.wrapper{width:300px; margin:10px auto; font:14px/1.5 arial;}
/*tab*/
#star{overflow:hidden;}
#star li{
float:left;
width:20px;
height:20px;
margin:2px;
display:inline;
color:#999;
font:bold 18px arial;
cursor:pointer
}
#star .act{
color:#c00
}
#star_word{
width:80px;
height:30px;
line-height:30px;
border:1px solid #ccc;
margin:10px;
text-align:center;
display:none
}
</style>
<script>
window.onload = function(){
 var star = document.getElementById("star");
 var star_li = star.getElementsByTagName("li");
 var star_word = document.getElementById("star_word");
 var result = document.getElementById("result");
 var i=0;
 var j=0;
 var len = star_li.length;
 var word = ['很差','差','一般',"好","很好"]
 for(i=0; i<len; i++){
 star_li[i].index = i;
 star_li[i].onmouseover = function(){
 star_word.style.display = "block";
 star_word.innerHTML = word[this.index];
 for(i=0; i<=this.index; i++){
  star_li[i].className = "act";
 }
 }
 star_li[i].onmouseout = function(){
 star_word.style.display = "none";
 for(i=0; i<len; i++){
  star_li[i].className = "";
 }
 }
 star_li[i].onclick = function(){
 result.innerHTML = (this.index+1)+"分";
 }
 }
}
</script>
</head>
<body>
<div class="wrapper">
打分结果 
<span id="result"></span>
<ul id="star">
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
<div id="star_word">一般</div>
</div> 
</body> 
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 动态添加事件代码
Nov 30 Javascript
Js 本页面传值实现代码
May 17 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
JQuery中$.each 和$(selector).each()的区别详解
Mar 13 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
元素全屏的设置与监听实例
Nov 28 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
vue实现记事本功能
Jun 26 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 Javascript
浅析JavaScript中的变量提升
Jun 01 Javascript
js实现简单的可切换选项卡效果
Apr 10 #Javascript
js使用DOM操作实现简单留言板的方法
Apr 10 #Javascript
js实现简单鼠标跟随效果的方法
Apr 10 #Javascript
js实现交换运动效果的方法
Apr 10 #Javascript
js实现简单的左右两边固定广告效果实例
Apr 10 #Javascript
javascript实现简单的鼠标拖动效果实例
Apr 10 #Javascript
js简单实现点击左右运动的方法
Apr 10 #Javascript
You might like
php 类自动载入的方法
2015/06/03 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
JS操作Cookies包括(读取添加与删除)
2012/12/26 Javascript
javascript页面渲染速度测试脚本分享
2014/04/15 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
javascript为按钮注册回车事件(设置默认按钮)的方法
2015/05/09 Javascript
Javascript基础_标记文字的实现方法
2016/06/14 Javascript
完美解决jQuery 鼠标快速滑过后,会执行多次滑出的问题
2016/12/08 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
JavaScript字符串对象
2017/01/14 Javascript
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
2018/02/06 Javascript
[原创]jquery判断元素内容是否为空的方法
2018/05/04 jQuery
微信小程序websocket实现聊天功能
2020/03/30 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
vue的三种图片引入方式代码实例
2019/11/19 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
[03:06]V社市场总监Dota2项目负责人Erik专访:希望更多中国玩家加入DOTA2
2014/07/11 DOTA
[01:11]steam端dota2实名认证操作流程视频
2021/03/11 DOTA
python使用post提交数据到远程url的方法
2015/04/29 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
python实现合并两个排序的链表
2019/03/03 Python
局域网内python socket实现windows与linux间的消息传送
2019/04/19 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
自我评价优秀范文分享
2013/11/30 职场文书
大雁塔英文导游词
2015/02/10 职场文书
冬季作息时间调整通知
2015/04/24 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
解决MySQL报“too many connections“错误
2022/04/19 MySQL