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

 <!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. 油田 （Oil Deposits UVA - 572）

    题目描述: 原题:https://vjudge.net/problem/UVA-572 题目思路: 1.图的DFS遍历 2.二重循环找到相邻的八个格子 AC代码: #include <iostr ...

  2. 【转】unity 热更新思路和实现

    声明:本文介绍的热更新方案是我在网上搜索到的,然后自己修改了一下,相当于是借鉴了别人的思路,加工成了自己的,在此感谢无私分享经验的朋友们. 想要使用热更新技术,需要规划设计好资源比较策略,资源版本,确 ...

  3. spark集群安装部署

    通过Ambari(HDP)或者Cloudera Management (CDH)等集群管理服务安装和部署在此不多介绍,只需要在界面直接操作和配置即可,本文主要通过原生安装,熟悉安装配置流程. 1.选取 ...

  4. vs_code 快捷键

    一般的Ctrl+Shift+P,F1显示命令面板按Ctrl+P快速打开,到文件.Ctrl + Shift + N新窗口/实例Ctrl + Shift + W /关闭窗口实例Ctrl +.用户设置Ctr ...

  5. Python+Opencv实现把图片转为视频

    1. 安装Opencv包 在Python命令行输入如下命令(如果你使用的Anaconda,直接进入Anaconda Prompt键入命令即可.如果你不知道Anaconda是什么,可以参考王树义老师的文 ...

  6. jquery datatable 常用例子

    在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTable简 ...

  7. Python面向对象-类成员

    类的成员可以分为三大类:字段.方法和属性: 注:所有成员中,只有普通字段的内容保存对象中,即:根据此类创建了多少对象,在内存中就有多少个普通字段.而其他的成员,则都是保存在类中,即:无论对象的多少,在 ...

  8. arp hook

    最近疯狂的研究Linux的种种功能,也颇有心得,这里讲述一下Linux下的Net的Hook,使用net的Hook可以实现很多很多非常底层的功能,比如过滤报文,做防火墙,做代理等等. Now,Let's ...

  9. 【bzoj4196】[Noi2015]软件包管理器 树链剖分+线段树

    题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖(即下载安装这个 ...

  10. Python 嵌套函数和闭包

    Python 嵌套函数和闭包 1.函数嵌套 如果在一个函数内部定义了另一个函数,我们称外部的函数为外函数,内部的函数为内函数,如下代码: def out_func(): def inner_func1 ...