• 简单的做了一个评分控件,其实还算不上控件,只是用javascript做了一个效果,可以直接放在你的程序中使用。


    以下内容是纯html+javascript代码:

    讲解一下:

    先看html部分

    <body>
    <div style="224; cursor:hand" onmouseout="setjb()">
    <div>
    <img id="img1" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(1)" onclick="setClick(1)" />
    <img id="img2" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(2)" onclick="setClick(2)"  />
    <img id="img3" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(3)" onclick="setClick(3)"  />
    <img id="img4" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(4)" onclick="setClick(4)"  />
    <img id="img5" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(5)" onclick="setClick(5)"  />
    <img id="img6" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(6)" onclick="setClick(6)"  />
    <img id="img7" src="1.png" width="32" height="32" alt="1" onmouseover="fdfd(7)" onclick="setClick(7)"  />
    <input id="jb" type="hidden" value="1" />
    </div>
    </div>

    </body>

    在这里定义了几个事件:

    1、onmouseover="fdfd(X)" (X换成对应的数值 :是 onmouseover 事件。也就是当鼠标在这些图片上移动的时候,要执行的动作。下面直接看一下动作的内容

    function fdfd(jb)
    {   
        
    for(var i=1;i<=7;i++)
        {
            
    var dc = document.getElementById("img"+i);
            
    if(jb>=i)
            {
            dc.src 
    = "2.png";} else
            {dc.src 
    = "1.png";}
        }
    }

    这句话的意思就是将7个图像跑一遍:根据得到的jb值,设定所有图像的内容。

    2、onclick="setClick(X)"  (X换成对应的数值)是当鼠标在图像控件执行onclick事件代码。直接看代码

     

    function setClick(jbvalue)
    {
        document.getElementById(
    "jb").value = jbvalue;
        }

    这句话的意思就是,直接找到隐藏的内容,将内容修改为 要记录的值。

    3、onmouseout="setjb()"  这是当鼠标离开DIV标签时,所要做的事情,很好理解。看看都做了些什么事情吧

     

    function setjb()
    {
        
    var jb = document.getElementById("jb").value;
        fdfd(jb);
        
        }

    就是根据隐藏部分记录的值来修改当前的显示。

     

    总结:

    1、当鼠标在图像控件中移动的时候,动态的显示当前会选择的评分级别的值。

    2、当鼠标在图像控件中点击某个控件的时候,就记下评分级别。当然是记录在一个隐藏内容里了。

    3、当鼠标离开后,就直接根据隐藏内容的值来设置图像控件的显示。

    下面是源代码,可以下载下来参考一下。

    /Files/lujin49/HTML/pfkj.zip

  • 相关阅读:
    ASP.NET MVC5 ModelBinder
    19 个 JavaScript 编码小技巧
    Tomcat使用线程池配置高并发连接
    排名前16的Java工具类
    RabbitMQ与spring集成,配置完整的生产者和消费者
    Spring4+Springmvc+quartz实现多线程动态定时调度
    Redis优化建议
    JPA的多表复杂查询
    Spring Boot中自定义注解+AOP实现主备库切换
    Restful API 中的错误处理
  • 原文地址:https://www.cnblogs.com/lujin49/p/2126776.html
Copyright © 2020-2023  润新知