星级评分 数组版 普通版

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,div,ul,li,p{margin:0;padding:0;}
body{color:#666;font:12px/1.5 Arial;}
ul{list-style-type:none;}
#star{position:relative;width:500px;margin:35px auto;}
#star ul,#star span{float:left;display:inline;height:35px;line-height:29px;}
#star ul{margin:0 10px;}
#star li{float:left;width:35px;cursor:pointer;text-indent:-9999px;background:url(../0519/star.gif) no-repeat;}
#star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(../0519/star.gif) no-repeat;padding:70px 10px 0; }
#star p em{color:#f60;display:block;font-style:normal;}
</style>

<script type="text/javascript">

function mouseOver(a)
{
var oUl=document.getElementsByTagName("ul")[0];
var aLi=document.getElementsByTagName("li")[0];
for(var i=0;i<a;i++){
oUl.children[i].style.backgroundPosition=‘0 -29px‘;
}
}

function mouseOut()
{
var arr = new Array();

for(var i=0;i<5;i++){
arr[i]=document.getElementById(‘star‘).children[1].children[i];
arr[i].style.backgroundPosition=‘0 0‘;
}
}

function Click(p)
{alert(p+"分")
}

</script>

</head>
<body>
<div id="star" ">
<span>点击星星就能打分</span>

<ul>
<li onmouseover="mouseOver(1)" onmouseout="mouseOut()" onClick="Click(1)">1</li>
<li onmouseover="mouseOver(2)" onmouseout="mouseOut()" onClick="Click(2)">2</li>
<li onmouseover="mouseOver(3)" onmouseout="mouseOut()" onClick="Click(3)">3</li>
<li onmouseover="mouseOver(4)" onmouseout="mouseOut()" onClick="Click(4)">4</li>
<li onmouseover="mouseOver(5)" onmouseout="mouseOut()" onClick="Click(5)">5</li>
</ul>
</div>
</body>
</html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
body,div,ul,li,p{margin:0;padding:0;}
body{color:#666;font:12px/1.5 Arial;}
ul{list-style-type:none;}
#star{position:relative;width:500px;margin:35px auto;}
#star ul,#star span{float:left;display:inline;height:35px;line-height:29px;}
#star ul{margin:0 10px;}
#star li{float:left;width:35px;cursor:pointer;text-indent:-9999px;background:url(../0519/star.gif) no-repeat;}
#star p{position:absolute;top:20px;width:159px;height:60px;display:none;background:url(../0519/star.gif) no-repeat;padding:70px 10px 0; }
#star p em{color:#f60;display:block;font-style:normal;}
</style>

<script type="text/javascript">

function mouseOver(a)
{
var oUl=document.getElementsByTagName("ul")[0];
var aLi=document.getElementsByTagName("li")[0];
for(var i=0;i<a;i++){
oUl.children[i].style.backgroundPosition=‘0 -29px‘;
}
}

function mouseOut()
{
var oUl=document.getElementsByTagName("ul")[0];
var aLi=document.getElementsByTagName("li")[0];
for(var i=0;i<5;i++){
oUl.children[i].style.backgroundPosition=‘0 0‘;

}
}

function Click(p)
{alert(p+"分")
}

</script>

</head>
<body>
<div id="star" ">
<span>点击星星就能打分</span>

<ul>
<li onmouseover="mouseOver(1)" onmouseout="mouseOut()" onClick="Click(1)">1</li>
<li onmouseover="mouseOver(2)" onmouseout="mouseOut()" onClick="Click(2)">2</li>
<li onmouseover="mouseOver(3)" onmouseout="mouseOut()" onClick="Click(3)">3</li>
<li onmouseover="mouseOver(4)" onmouseout="mouseOut()" onClick="Click(4)">4</li>
<li onmouseover="mouseOver(5)" onmouseout="mouseOut()" onClick="Click(5)">5</li>
</ul>
</div>
</body>
</html>

时间： 2024-10-14 00:55:29

星级评分 数组版 普通版的相关文章

数组练习：各种数组方法的使用&amp;&amp;事件练习：封装兼容性添加、删除事件的函数&amp;&amp;星级评分系统

<!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> <meta http-equiv="Content-

Vue实现一个星级评分组件

星级评分在WEB开发中经常可能会用到,因此把他封装成一个vue组件是很合适的,要做的效果如下: 因此我们需要通过后台传递过来的score来写业务逻辑 比如这个模拟数据,3.6分就应该是三颗半星,小于3.5分大于3分的依旧按3分判断 在设计给出的图标中单颗星级有无星级,半颗,以及一颗 根据星星的大小,还会给出24,36,48格式大小的星星,因此这个组件的逻辑还是比较复杂的 star组件需要两个从外部传递进来的参数,一个是star的大小,一个是分数 因此在props里定义这两个从外部传递进来的变量

js实现星级评分之方法一

利用一个星级评分的小案例,来逐步封装js星级评分插件. 从最基础的js知识,通过一个小的demo,逐步学习js的面向对象知识. 从浅到深,逐步递进. 图片素材 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>星级评分--第一种实现方式</title> </head> <style type="text/css&quo

如何在iPhone 显示一个 星级评分

http://blog.csdn.net/fanjunxi1990/article/details/8663914 由于项目需求,需要做一个列表,里面有各个商品的评分,就是app store里面所有app的星级评分 下面是DisplayStarView.h [csharp] view plaincopy // //  DisplayStarView.h //  testExpress // //  Created by Juncy_Fan on 13-3-12. //  Copyright (c

Windows7 SP1旗舰版精简版最终版本

2016年6月9号,老毛子@lopatkin大神针对Win7 SP1旗舰版精简版进行了最终更新,此次主要是之前小问题的修复和调整.该版为Windows 7 SP1 简体中文旗舰版最新版,包含2016年微软累积更新,经过国内众多系统爱好者检验,精简后体积比较小,适合低配电脑,非常稳定流畅!Win7爱好者们不妨下载收藏! 俄罗斯系统精简狂人@lopatkin 大侠一直专注于Windows操作系统的精简封装,每次微软有新的系统版本发布,他都会第一时间制作跟进发布.老毛子精简改进的系统以纯净流畅为主,无

Java 反编译工具 —— JAD 的下载地址（Windows版/Linux版/Mac OS 版）

Java 反编译工具 —— JAD 的下载地址. 各种版本哦! Windows版,Linux版,Mac OS 版,等等 下载地址: http://varaneckas.com/jad/ Java 反编译工具 -- JAD 的下载地址(Windows版/Linux版/Mac OS 版),布布扣,bubuko.com

干货之运用CALayer创建星级评分组件（五角星）

本篇记录星级评分组件的创建过程以及CALayer的运用. 为了实现一个星级评分的组件,使用了CALayer,涉及到mask.CGPathRef.UIBezierPath.动画和一个计算多角星关键节点的算法. CALayer管理基于图像的内容,并让我们可以在内容上添加动画.UIView及其子类拥有一个属性layer,我们可以运用该属性做出非常多的效果.例如圆角.多边形.甚至自定义形状的view,局部遮挡,擦除模糊效果,局部内容依次闪亮效果,弧形进度条等等. 首先查看CALayer的一个属性mask

Android进度条(星级评分)使用详解(二)

一.SeekBar拖动条使用 SeekBar继承于ProgressBar,ProgressBar所支持的XML属性和方法完全适用于SeekBar.拖动条和进度条的区别是:进度条采用颜色填充来表明进度完成的程度,而拖动条则通过滑块位置来标识数值并且运行用户拖动滑块来改变值.因此,拖动条通常用于对系统的某种数值进行调节,比如调节音量.图片的透明度等. 1.拖动条效果 2.代码实现 功能:通过拖动滑块该动态改变图片的透明度 public class MainActivity extends Actio

InstallShield12豪华版破解版下载|InstallShield下载|软件打包工具

InstallShield 12 豪华版+破解版 下载 下载速度:220kb/s InstallShield 12为软件发行方提供率先的安装程序解决方式,可以制作强大可靠的Windows Installer(MSI).InstallScript以及跨平台的安装程序.它是最著名的专业安装程序制作软件,如今Macrovision公司和InstallShield公司合并,该Premier Edition豪华版包括了InstallShield 12.0 Professional Edition:Inst