效果图：

代码：

<!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-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
#mark{ margin:200px auto;height:50px; width:300px;/* border:#CCC 1px solid;*/ position:relative;}
#mark ul{ height:100%; width:100%;}
ul li{ list-style:none; height:40px; width:40px; cursor:pointer; margin:0px; display:block; float:left;background:url(images/star.png) no-repeat 0 0;}
p{ padding:8px;height:25px; width:74px; border:#CCC 1px solid; display:none; position:absolute; left:210px; top:0px; line-height:25px; font-size:14px; font-family:"微软雅黑"; text-align:center;}
.active{ background-image:url(images/star.png); background-position:0 -40px;}
span{
display: none;
height: 0;
width: 0;
}
.left{
position: absolute;
border-color: transparent #CCC transparent transparent;
border-style:solid;
border-width:8px;
left:195px;
top:15px;
}
.right{
position: absolute;
border-color: transparent #FFF transparent transparent;
border-style:solid;
border-width:8px;
left: 196px;
top:15px;
}
</style>
<script type="text/javascript">
var optxt=['很差','较差','一般','推荐','力荐']
window.onload=function(){
var oDiv=document.getElementById('mark');
var aLi=oDiv.getElementsByTagName('li');
var oP=oDiv.getElementsByTagName('p')[0];
var ospan=oDiv.getElementsByTagName('span');
var i=0;

for(i=0; i<aLi.length;i++){
aLi[i].index=i;
/*鼠标移入事件*/
   aLi[i].onmouseover=function(){
oP.style.display ='block';
ospan[0].style.display ='block';
ospan[1].style.display ='block';
   oP.innerHTML=optxt[this.index];

for(i=0;i<=this.index;i++)
{aLi[i].className ='active';}
}

/*鼠标移出事件*/
    aLi[i].onmouseout=function(){
oP.style.display ='none';
ospan[0].style.display ='none';
ospan[1].style.display ='none';
   for(i=0;i<aLi.length;i++)
{ aLi[i].className ='';}/*鼠标离开的时候将所有li的class置空*/
}
/*鼠标点击事件*/
   aLi[i].onclick= function(){
alert('感谢您的评分！您给这部电影投了'+(this.index+1)+'分！');
}
}
}
</script>
</head>
<body>
<div id="mark">
 <ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
 </ul>
<p></p>
 <span class="left"></span><span class="right"></span>
</div>
</body>
</html>

今天就到这儿吧，赶紧复习去，马上就要考试了。。。。

javascript实现模仿迅雷电影评分的更多相关文章

  1. 【转】基于R语言构建的电影评分预测模型

    一,前提准备         1.R语言包:ggplot2包(绘图),recommenderlab包,reshape包(数据处理)         2.获取数据:大家可以在明尼苏达州大学的社会化计算研 ...

  2. 『JavaScript』模仿接口

    JavaScript中并没有内置的创建或实现接口的方法.这里将利用JavaScript的灵活性,来实现与接口意义相同的功能. 什么是接口? 接口的好处: 接口提供了一种用以说明一个对象应该具有哪些方法 ...

  3. 推荐系统(recommender systems):预测电影评分--问题描述

    推荐系统很重要的原因:1>它是机器学习的一个重要应用2>对于机器学习来说,特征是非常重要的,对于一些问题,存在一些算法能自动帮我选择一些优良的features,推荐系统就可以帮助我们做这样 ...

  4. Python反爬：利用js逆向和woff文件爬取猫眼电影评分信息

    首先:看看运行结果效果如何! 1. 实现思路 小编基本实现思路如下: 利用js逆向模拟请求得到电影评分的页面(就是猫眼电影的评分信息并不是我们上述看到的那个页面上,应该它的实现是在一个页面上插入另外一 ...

  5. JavaScript之模仿块级作用域

    简介:在JavaScript中没有块级作用域的概念.这意味这在块语句中定义的变量,实际上在包含函数中而非语句中创建的.证明代码如下: function outputNumbers(count){ fo ...

  6. JavaScript IIEF 模仿块级作用域

    前言 JavaScript没有块级作用域的概念.但是通过IIEF 立即执行函数我们可以实现块级作用域. function outputNumbers(count){ for (var i=0; i & ...

  7. 漂亮！Javascript代码模仿淘宝宝贝搜索结果的分页显示效果

    分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager  JS ...

  8. javascript中模仿块级作用域

    学过 javascript 的都知道 javascript 里面没有块级作用域的概念,这就意味着在块语句中定义的变量,实际上是在包含函数中而非语句中创建的,看下面的例子: function outPu ...

  9. 推荐系统(recommender systems):预测电影评分--构造推荐系统的一种方法：低秩矩阵分解(low rank matrix factorization)

    如上图中的predicted ratings矩阵可以分解成X与ΘT的乘积,这个叫做低秩矩阵分解. 我们先学习出product的特征参数向量,在实际应用中这些学习出来的参数向量可能比较难以理解,也很难可 ...

随机推荐

  1. iOS网络请求基础

    这篇是关于网络请求的,结合公司的实际情况编写,如果有不同意见欢迎留言共同讨论. iOS在9.0之后彻底放弃了NSURLConnection,现在已经改用了NSURLSession进行网络请求.一般现在 ...

  2. Hibernate学习之缓存简析

    一.一级缓存 Hibernate的Session提供了一级缓存的功能,默认总是有效的,当应用程序保存持久化实体.修改持久化实体时,Session并不会立即把这种改变提交到数据库,而是缓存在当前的Ses ...

  3. Laravel 单元测试

    前言 今天是第十三周周一,虽然接下来的时间会比较忙,比如各科的课设.考试.磨锤子.但是还是有种涅槃重生的感觉,昨晚的睡眠确实不怎么样,但是今天十分精神,已经想不起来多久没有这么早起了~让我累并快乐着吧 ...

  4. Webx pull service

    1.概述 pull service的功能是将对象置入模板中.被pull service放到模板中的对象,不需要应用程序的干预即可直接使用.如果模板没有用到某个对象,则不会产生创建该对象的开销.看起来, ...

  5. verilog中连续性赋值中的延时

    上次遇到一个问题.写一个testbench需要移动两个时钟之间的相位.后来一想,貌似我们都是这么写clock的 always    #(`P/2) clk = ~clk 我的两个时钟都是这么写,只是p ...

  6. 无法启动此程序，因为计算机中丢失QtCore4.dll。尝试重新安装该程序以解决此问题（在系统里添加3个路径）

    解决方法: 计算机-属性-高级系统设置-高级-环境变量-系统变量-Path 添加 E:\Qt\4.8.5\bin; E:\Qt\4.8.5\qmake; E:\mingw\bin 重启计算机 http ...

  7. Cocos2d-x init() 和 onEnter() 区别

    在Cocos2d-x中经常碰到 init() 和 onEnter() init()和onEnter()这两个方法都是CCNode的方法. 1.二者的执行顺序是:先init() 后onEnter(). ...

  8. DOC下编译和运行带有包的java类文件

    前言: 带有包名的java类在DOC下编译可以成功,但是运行出错  错误: 找不到或无法加载主类 com.soanl.socket.MyServer D盘temp文件下有个Hello.java文件,包 ...

  9. _WSAStartup@8，该符号在函数 _main 中被引用

    int WSAStartup( __in WORD wVersionRequested, __out LPWSADATA lpWSAData ); WSAStartup 格  式: int PASCA ...

  10. [每日一题] 11gOCP 1z0-052 :2013-09-15 Enterprise Manager Support Workbench..................B9

    转载请注明出处:http://blog.csdn.net/guoyjoe/article/details/11715219 正确答案:ABD EnterpriseManger Support Work ...