javaScript实现五星好评代码
效果如图：
具体代码：
<!doctype html>
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function test(myvalue){
for(var i=1;i<=5;i++){//将所有都变白星星
document.getElementById(""+i).innerHTML="<h1>☆</h1>";
document.getElementById(""+i).setAttribute("style","color:black");
}
for(var i=1;i<=myvalue;i++){//通过传入的id（也是一个数字）确定id以下的div都是橙色星星。
document.getElementById(""+i).innerHTML="<h1>★</h1>";
document.getElementById(""+i).setAttribute("style","color:orange");
}
}
</script>
<style type="text/css">
.myfloatleft{float:left;}
</style>
</head>
<body>
<div id="showdiv">
<div id="1" class="myfloatleft" οnmοuseοver="test('1')" οnmοuseοut="myclear()"><h1>☆</h1></div>
<div id="2" class="myfloatleft" οnmοuseοver="test('2')" οnmοuseοut="myclear()"><h1>☆</h1></div>
<div id="3" class="myfloatleft" οnmοuseοver="test('3')" οnmοuseοut="myclear()"><h1>☆</h1></div>
<div id="4" class="myfloatleft" οnmοuseοver="test('4')" οnmοuseοut="myclear()"><h1>☆</h1></div>
<div id="5" class="myfloatleft" οnmοuseοver="test('5')" οnmοuseοut="myclear()"><h1>☆</h1></div>
</div>
<div id="mydiv"></div>
<br><br><br>
<p>
<h1>说明:</h1>
1、制作五个“☆”，并且用div框起来。<br>
2、测试当鼠标放在星星div上面时会不会产生反应（给div添加onmouseover事件）<br>
3、修改代码:当鼠标放在星星的div上面时，当前的div内容修改为"★"。<br>
4、测试：让所有div的星星都是白色的。
5、测试：通过传入一个参数，让指定id的div以下的div内容为"★"。
</p>
</body>
</html>
javaScript实现五星好评代码相关推荐
- 前端实践小项目(一)五星好评与暂停取值
哈喽 ~ 大家好鸭!这篇我们来看看前端实践小项目第一篇 "五星好评与暂停取值"(底部有源代码) 目录 五星好评(JS版) 五星好评(JQuery版) 暂停取值 五星好评(JS版) ...
- java五星好评点评器_JavaScript实现商品评价五星好评
本文实例为大家分享了JavaScript实现商品评价五星好评的具体代码,供大家参考,具体内容如下 一.效果展示 二.代码实现 1.html代码 好评 window.onload = function( ...
- jQuery五星好评界面反馈界面
星星: jQuery五星好评界面反馈界面 <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
- java五星好评点评器_亲，麻烦给个五星好评！—RatingBar
引言 上一篇的CheckBox已经让大家越来越接近实战演练了,本章我们继续分享干货给大家,今天介绍一个实用的UI控件RatingBar(星级评分条),对于使用过电商APP(某东,某宝等)的小伙伴们来说 ...
- HTML5期末大作业：中国传统节日网页设计——端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码 学生网页课程设计期末作业下载...
HTML5期末大作业:中国传统节日网站设计--端午节(9个页面) HTML+CSS+JavaScript 节日网页HTML代码 学生网页课程设计期末作业下载 临近期末, 你还在为HTML网页设计结课作 ...
- Vue_实现五星好评效果
一.前言 我们在做美团之类的app的时候,很多时候要显示五星好评,下面就用vue来实现这个将数字用图形显示的效果 二.主要内容 1.将五星写在一个复用组件里面(因为在很多地方都会用到) <tem ...
- java五星好评_亲，麻烦给个五星好评！—RatingBar
引言 上一篇的CheckBox已经让大家越来越接近实战演练了,本章我们继续分享干货给大家,今天介绍一个实用的UI控件RatingBar(星级评分条),对于使用过电商APP(某东,某宝等)的小伙伴们来说 ...
- 使用jQuery实现五星好评
记得给五星好评哟 jQuery是js的一个库,封装了我们开发过程中常用的一些功能,方便我们来调用,提高了我们的开发效率. Js库是把我们常用的功能放到一个单独的文件中,我们用的时候,直接引用到页面里面 ...
- 五星好评的三种方法（原生js）
先展示js代码 /*//01 // 获取节点 var starCollection = document.getElementsByClassName('star-item'); //每个元素都要有点 ...
最新文章
- 视网膜脱落相关知识(持续更新中)
- 骗子收录网站源码PHP搭建
- 为什么熊掌号没有了_为什么人类总吃食草动物，很少吃食肉动物？
- 白话算法(6) 散列表(Hash Table) 从理论到实用（下）
- 通过yum安装php7
- 所有C#程序员必须知道的13件事
- 机器学习十大算法简介
- linux svn安装教程
- 创业半年回顾（没饭吃了，我再也不想创业了）
- Medusa 破解centos密码
- 无法远程连接到计算机 凭证,远程连接凭据不工作如何处理_远程桌面连接提示凭据无法工作的解决教程-win7之家...
- html显示隐藏图片,简单的图片显示与隐藏
- 大数据中台架构以及建设全流程二（Daas层设计）
- UVa514 Rails（铁轨）
- ubuntu18 百度云盘
- 大连理工大学计算机学院院长,大连理工大学计算机学院姚念民教授团队最新成果被人工智能顶级期刊TNNLS录用...
- python getattr()函数
- css 径向渐变实现渐变小圈
- poj 3904 求四元互质集合
- Golang学习笔记之GORM基础使用（一）