星级选择器 提交代码
星级选择器,提交代码适用于评论等
没有用到js库,就是单独的js代码
XML/HTML Code
- <form action="" method="get">
- <div id="star_level" star_width="14">
- <p>服务</p>
- <ul class="star_rating">
- <li style="display:none;">
- <input type="text" name="serve" value="" />
- </li>
- <li class="current_rating">default level</li>
- <li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
- <li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
- <li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
- <li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
- <li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
- </ul>
- <p>价格</p>
- <ul class="star_rating">
- <li style="display:none;">
- <input type="text" name="price" value="" title="这里设置为2的话,表示默认2颗星亮。" />
- </li>
- <li class="current_rating">default level</li>
- <li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
- <li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
- <li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
- <li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
- <li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
- </ul>
- <p>质量</p>
- <ul class="star_rating">
- <li style="display:none;">
- <input type="text" name="mass" value="" />
- </li>
- <li class="current_rating">default level</li>
- <li><a href="#" title="1 of 5 stars" class="one_star">1</a></li>
- <li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li>
- <li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li>
- <li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li>
- <li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li>
- </ul>
- </div>
- <input type="submit" value="提交后请看地址栏的参数" />
- </form>
XML/HTML Code
- <script type="text/javascript">
- <!--
- function __start(){
- var initialize_width=0;
- if(document.getElelmentById){return false};
- if(document.getElementsByTagName==null){return false;}
- var startLevelObj=document.getElementById("star_level")
- if(startLevelObj==null){return false;}
- initialize_width=parseInt(startLevelObj.getAttribute("star_width"),10);
- if(isNaN(initialize_width) || initialize_width==0){return false;}
- var ul_obj=startLevelObj.getElementsByTagName("ul");
- if(ul_obj.length<1){return false;}
- var length=ul_obj.length;
- var li_length=0;
- var a_length=0;
- var li_obj=null;
- var a_obj=null;
- var defaultInputObj=null;
- var defaultValue=null;
- for(var i=0;i<length;i++){
- li_obj=ul_obj[i].getElementsByTagName("li");
- li_length=li_obj.length;
- if(li_length<0){return false;}
- //获取默认值
- defaultInputObj=li_obj[0].getElementsByTagName("input");if(!defaultInputObj){return false;}
- defaultValue=parseInt(defaultInputObj[0].value,10);
- if(!isNaN(defaultValue) && defaultValue!=0){
- //alert("有初始值!");
- //li_obj[1].style.width=initialize_width*defaultValue+"px";
- //defaultValue=0;
- }
- for(var j=0;j<li_length;j++){
- a_obj=li_obj[j].getElementsByTagName("a");
- if(a_obj.length<1){continue;}
- if(a_obj[0].className.indexOf("star")>0){
- a_obj[0].onclick=function(){
- return give_value(this);
- }
- a_obj[0].onfocus=function(){
- this.blur();
- }
- }
- }
- }
- }
- function give_value(obj){
- var status=true;
- var parent_obj=obj.parentNode;
- var i=0;
- while(status){
- i++;
- if(parent_obj.nodeName=="UL"){break;}
- parent_objparent_obj=parent_obj.parentNode;
- if(i>1000){break;}//防止找不到ul发生死循环
- }
- var hidden_input=parent_obj.getElementsByTagName("input")[0];
- if(hidden_input.length<1){/*alert("sorry?\nprogram error!")*/;}
- var txt=obj.firstChild.nodeValue;//确保不能存在空格哦,因为这里用的firstChild
- if(isNaN(parseInt(txt,10))){/*alert('level error!')*/;return false;}
- hidden_input.setAttribute("value",txt.toString());
- //固定选中状态,先找到初始化颜色那个li
- var current_li=parent_obj.getElementsByTagName("li");
- var length=current_li.length;
- var ok_li_obj=null;
- for(var i=0;i<length;i++){
- if(current_li[i].className.indexOf("current_rating")>=0){
- ok_li_obj=current_li[i];break;//找到
- }
- }
- __current_width=txt*14;
- ok_li_obj.style.width=__current_width+"px";
- return false;
- }
- __start();
- //-->
- </script>
CSS Code
- body{font-size:12px;}
- ul{padding:0;margin:0;}
- /*star.css*/
- .star_rating {list-style:none;margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(rating_stars.gif) 0 0 repeat-x; overflow:hidden;font-size:0;}
- .star_rating li{padding:0;margin:0;float:left;}
- .star_rating li a{display:block;width:14px;height:12px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;}
- .star_rating li a:hover{background:url(rating_stars.gif) 0 12px;z-index:2;left:0;}
- .star_rating a.one_star{left:0;}
- .star_rating a.one_star:hover{width:14px;}
- .star_rating a.two_stars{left:14px;}
- .star_rating a.two_stars:hover{width:28px;}
- .star_rating a.three_stars{left:28px;}
- .star_rating a.three_stars:hover{width:42px;}
- .star_rating a.four_stars{left:42px;}
- .star_rating a.four_stars:hover{width:56px;}
- .star_rating a.five_stars{left:56px;}
- .star_rating a.five_stars:hover{width:70px;}
- .star_rating li.current_rating{background:url(rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent:-9000px;z-index:1;left:0;}
- /*end star.css*/
- #star_level{margin:0 0 20px 20px;}
- #star_level p{margin:20px 0 5px 0;}
相关推荐
星级选择器在网上会搜到很多类似的代码,不过实现起来相对比较复杂,在本文将为大家介绍的是使用js简单的实现下,感兴趣的朋友不要错过
(5)排水设备监控:排水设备自带液位控制器,由强电专业实施自成控制系统,高位开泵,低位停泵,一般不纳入BA系统。 三、通信网络系统 通信网络系统是五星级酒店智能化系统的基础Communication infrastructure,...
StarBar是由10个星星组成的,即10个星级。所有星星又被分为三个等级,分别用红(red)、黄(yellow)、绿(green)来标识星星。星星的选择过程有动画效果,极具动感。项目地址:https://github.com/badoo/StarBar 效果图:...
日期/时间选择器 表情符号选择器 输入类型 自动完成 选择 颜色选择器 切换 滑杆 单选按钮 类型选择 标签输入 自动输入大小/文本区域 星级 拖放 可排序清单 富文本编辑器 Markdown编辑器 图片编辑 表单组件集合 各种...
项目分类器。 收集 Github 项目(收集者)信息并按星级排序。 该项目是 gopher 的一个很棒的项目,它收集和整理了各种有用的项目。 但是,选择哪个项目需要考虑项目的开始、分叉、提交和贡献者。 于是创建了这个项目...
为了快速启动和运行,该软件包现在支持仅渲染具有默认值的选择器 < star> 基本 财产 类型 描述 默认 评分 数字 0.0-5.0之间的数字将确定5星评级多边形的充满度 1个 isIndicatorActive 布尔型 能够确定等级指标的...
NuraAdmin-免费的引导管理仪表板模板。 Nura Admin是使用Bootstrap 4构建的...日期时间选择器 颜色选择器 多媒体: 石工 灯箱 猫头鹰旋转木马 图像放大镜 字体真棒图标 **更多详细信息,演示和下载,请点击此处: **
产品特点移动友好 :mobile_phone: 方便地选择时隙 :raised_hand: 不同的图表类型 :bar_chart: 列出所有观星者 :boy: 将图表导出为PNG图像 :framed_picture:谢谢:CSS-IN-JS最佳实践eslint +漂亮:代码更好哈士奇+ ...
是连锁酒店、星级酒店、商务酒店的最佳选择。系统亦可根据客户的要求定制各种接口系统:门锁接口、身份证阅读器接口、点菜宝接口、电子菜谱接口、电话计费接口等。提供全方位的售后服务。 华软捷酒店管理系统的主要...
易于使用的星级评分控件,具有以swift(iOS)编写的动态功能。 特征 在Storyboard或XIB中使用控件非常容易,并且开发人员可以在Interface Builder中轻松查看应用于控件的更改,例如星形选择的颜色和Rate points。 ...
AIMP4音乐播放器是一款源于俄国的音频播放器,它支持几乎所有的音频格式的播放,采用32bit音频处理, 18-band 的EQ均衡器,带来高质量音频体验效果!不仅支持众多的插件,而且默认提供两款皮肤,支持皮肤定制,在AIMP...
WinHex32 是一款以通用的 16 进制编辑器为核心,专门用来对付计算机取证、数据恢复、低级数据处理、以及 IT 安全性、各种日常紧急情况的高级工具: 用来检查和修复各种文件、恢复删除文件、硬盘损坏、数码相机卡损坏...
支持同时显示多个存储库(对进行比较非常有用) 提供GitHub身份验证(通过访问令牌)来克服GitHub API速率限制器,该限制器限制了未经身份验证的API调用次数。 身份验证详细信息存储在本地,不发送到任何服务器默认...
* 智能搜索和替换功能,进行替换时,如果替换字符大于或小于原始字符时可进行选择性操作 * 不同驱动器克隆以及驱动器镜像解释 * 脚本和应用程序接口(API) * 用于文件和磁盘的成熟的撤消和备份机制 * 加密和...
WinHex是一个专门用来对付各种日常紧急情况的小工具。它可以用来检查和修复各种文件、恢复删除文件、硬盘损坏造成的数据丢失等。同时它还可以让你看到其他程序隐藏...中文设置方法,在Help菜单的Setup里面选择设置即可
匹配纸牌游戏 当您做出第一选择时,游戏就会开始。... 重新启动按钮允许玩家在游戏的任何时间重置游戏板:计时器和星级。 游戏显示一颗星级(从1-3开始),以反映玩家的表现。 在游戏开始时,它应显示3星。 经过一些移
语言:English ...DSReviews是任何与速卖通有直接运输业务的商店所有者的有力合作伙伴。 如今,在线购物者在做出购买决定时严重依赖...高级过滤器:通过星级选项(全星级,仅4星级,仅5星级…)选择要导入的评论,带有图片/
考虑到有助于通过简单地与5星级改进它 ¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯¯ •增加了超过120个新图标; •新增10张壁纸; •添加了新的图标变体; •重建和改进了很多图标; •已读取的抽屉部分; •更新了...
总体来说是一款非常不错的 16 进制编辑器。得到 ZDNetSoftwareLibrary 五星级最高评价,拥有强大的系统效用。 <br>13.2 SR-11 更新内容: * 在目录浏览器列头添加新的快速过滤按钮,可以动态修改过滤设置。 ...
点击工具栏中的 RAM 编辑工具按钮,弹出 RAM 编辑器,选择需要浏览或编辑修改的 RAM 区,选择确定就可以了,RAM 的内容就显示在主窗口了。在未注册的版本中,可以编辑,但不能保存大小超过 512K 的文件且只能浏览而不...