模仿网页上评分的五个五星。

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <style type="text/css">

         .r

         {

             color:red;

         }

         .b

         {

             color:black;

         }

     </style>

     <script type="text/javascript">

         function initEvent() {

             var inputs = document.getElementsByTagName("input");

             for (var i = 0; i < inputs.length; i++) {

                 var input = inputs[i];

                 input.onblur = inputOnBlur;

             }

         }

             function inputOnBlur()

             {

                 if(this.value.length<=0)

                 {

                     this.style.background = "red";

                 }

                 else

                 {

                     this.style.background = "white";

                 }

             }

         function initTr()

         {

             var trs = document.getElementsByTagName("td");

             for(var i=0;i<trs.length;i++)

             {

                 var td = trs[i];

                 td.style.cursor = "pointer";

                 td.width = "30px";

                 td.height = "30px";

                 td.onfocus = deal;

             }

         }

         function deal()

         {

             var inputs = document.getElementsByTagName("td");

             for(var i=0;i<inputs.length;i++)

             {

                 var input = inputs[i];

                 if(input==this)

                 {

                     input.className = "r";

                     for (var p = i + 1; p< inputs.length; p++)

                     {

                         inputs[p].className = "b";

                     }

                     return;

                 }

                 else

                 {

                     input.className = "r";

                 }

             }

         }

     </script>

 </head>

 <body onload="initTr()">

   <input type="text" />

     <input type="text"/>

     <input type="text" />

     <input type="text" />

     <a href="htmlpagewrite.html">htmlpagewrite.html</a>

     <font size="40">

         <table border="0" style="margin-top:100px;margin-left:100px">

             <tr>

                 <td ondblclick="this.className='b'">★</td>

                 <td>★</td>

                 <td>★</td>

                 <td>★</td>

                 <td>★</td>

             </tr>

         </table>

     </font>

 </body>

 </html>

DOM案例五星评分控件的更多相关文章

  1. IOS 五星评分控件

    程序中需要打分的功能,在网上找了几个,都不是很满意.下面是实现出的效果.可以点击,可以拖动. 使用方法:初始化控件. TQStarRatingView *starRatingView = [[TQSt ...

  2. Android星星评分控件RatingBar的使用

    在Android的开发中,有一个叫做评分控件RatingBar,我们可以使用该控件做等级划分.评分等作用,星星形状显示,也可以半星级别,我们来看一下评分控件如何使用. 布局文件中定义控件以及属性,这里 ...

  3. WPF案例 (五) 对控件界面使用倒影

    原文:WPF案例 (五) 对控件界面使用倒影 在这个程序里对5个2D控件界面应用了垂直倒影,边缘模糊化和模型变换,在本例中,这5个2D控件为Border, 各包含了一幅Image,界面如下图所示,源码 ...

  4. Android自定义评分控件：RatingStarView

    RatingStarView Android自定义的评分控件,类似ProgressBar那样的,使用星星图标(full.half.empty)作为progress标识的评分/打分控件. 效果图 图1: ...

  5. JQuery版评分控件

    Hi All, 分享一个学习JQuery做的一个评分控件. 需求:当鼠标移动到 ‘☆’ 上时,该字符左边的 ‘☆’ 变成 '★',该字符右边仍然是 ‘☆’, 并显示相应星星数的评价结果:当鼠标推出 ‘ ...

  6. Web用户控件开发--星型评分控件

    本文中分享一个实现简单,使用方便的星型评分控件. 一:贴几张测试图片先: 二.星型评分控件的实现: RatingBar.ascx: <%@ Control Language="C#&q ...

  7. UWP开发---DIY星级评分控件

    一,需求来源 在开发韩剧TV UWP过程中,遇到了星级评分的控件问题,在安卓和html中很容易用现有的轮子实现星级评分,搜索了一下目前UWP还未有相关文章,在WPF的一篇文章中使用Photo shop ...

  8. 自定义RatingBar评分控件

    1.介绍 实现类似美团外卖评分供能,系统提供了RatingBar,今天来自定义一波,当做自定义view的一个学习,效果如下,能够滑动或者点击变化星星数量 2.自定义属性 在values目录下的attr ...

  9. iOS- 非整星的评分控件(支持小数)

    概述 订单评论里实现星级评分控件: 简单整星评价与非整星的精评价. 详细 代码下载:http://www.demodashi.com/demo/10711.html 现在很多应用都有评分功能. 有了订 ...

随机推荐

  1. 最全的Markdown语法

    目录 Markdown语法 多级标题 引用与注释 插入代码 行内代码 代码段 图片 超链接 行内超链接 参数式超链接 字体 表格 分割线 多级列表 无序列表 有序列表 多选框 LaTeX公式 行内La ...

  2. 地牢逃脱（BFS（广度优先搜索））

    题目描述 给定一个 n 行 m 列的地牢,其中 '.' 表示可以通行的位置,'X' 表示不可通行的障碍,牛牛从 (x0 , y0 ) 位置出发,遍历这个地牢,和一般的游戏所不同的是,他每一步只能按照一 ...

  3. day-18 滑动平均模型测试样例

    为了使训练模型在测试数据上有更好的效果,可以引入一种新的方法:滑动平均模型.通过维护一个影子变量,来代替最终训练参数,进行训练模型的验证. 在tensorflow中提供了ExponentialMovi ...

  4. dice2win

    触发交易 转0个 https://etherscan.io/tx/0x784e80167353a886183106cbe3bd15e614cafdb5d6885ccd101177aa0f937a36 ...

  5. HADOOP docker(五):hadoop用户代理 Proxy user

    1.hadoop用户代理简介2.配置3.实验 1.hadoop用户代理简介 hadoop用户代理功能的作用是让超级用户superuser模拟一个普通用户来执行任务.比如用户joe通过oozie提交一个 ...

  6. ViewPager的简单使用说明

    前提:工程中使用ViewPager,需要导入google提供的jar包(android-support-v4.jar). 要学习ViewPager的使用,建议直接看官方文档 Creating Swip ...

  7. 学霸系统UI项目功能说明书 v1.0版本

    发布人员:软件工程实践小队. 发布内容:学霸系统UI项目说明书. 版本:学霸v1.0版本. 学霸系统UI项目说明书 v1.0版本分为以下部分: Part 1:用户须知: Part 2:功能实现: Pa ...

  8. aria2 on ubuntu

    http://www.5yun.org/9102.html http://jpollo.logdown.com/posts/160847-aria2c-and-yaaw aria2c --enable ...

  9. ubuntu 安装 hustoj

    https://github.com/zhblue/hustoj 准备工作: http://www.java123.net/v/961634.html 1.首先打开命令行,切换到root身份,获得最新 ...

  10. HDU2376Average distance(树形dp|树上任意两点距离和的平均值)

    思路: 引:如果暴力枚举两点再求距离是显然会超时的.转换一下思路,我们可以对每条边,求所有可能的路径经过此边的次数:设这条边两端的点数分别为A和B,那 么这条边被经过的次数就是A*B,它对总的距离和的 ...