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 获取网页参数系统
Jul 19 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
js动态设置div的值下例子
Oct 29 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
Vue响应式原理详解
Apr 18 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
Kindeditor编辑器添加图片上传水印功能(php代码)
2017/08/03 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
jQuery的一些注意
2006/12/06 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
2013/07/12 Javascript
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
2016/09/17 Javascript
Vue.use源码分析
2017/04/22 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
JavaScript实现多叉树的递归遍历和非递归遍历算法操作示例
2018/02/08 Javascript
如何安装控制器JavaScript生成插件详解
2018/10/21 Javascript
详解angularjs跨页面传参遇到的一些问题
2018/11/01 Javascript
详解JavaScript执行模型
2020/11/16 Javascript
浅谈Python类里的__init__方法函数,Python类的构造函数
2016/12/10 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
Python爬虫实现简单的爬取有道翻译功能示例
2018/07/13 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
Python之修改图片像素值的方法
2019/07/03 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Python中os模块功能与用法详解
2020/02/26 Python
python中的错误如何查看
2020/07/08 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
致400米运动员广播稿
2014/02/07 职场文书
2014村党支部书记党建工作汇报材料
2014/11/02 职场文书
地心历险记观后感
2015/06/15 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android