效果图：

代码：

<!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. C#编写的windows服务安装后启动提示“服务启动后又停止了”

    使用C#编写的windows服务安装到服务器上行后进行启动时,总是提示“服务启动后又停止了”. 检查了服务逻辑是没问题,安装在开发本地也是正常,网上查了资料说是可能是服务没有注册,我检查了服务是正常注 ...

  2. 类中成员函数与数据成员private/pubic/protected

    类中成员函数与数据成员private/pubic/protected

  3. C++对象模型6--对象模型对数据访问的影响

    如何访问成员? 前面介绍了C++对象模型,下面介绍C++对象模型的对访问成员的影响.其实清楚了C++对象模型,就清楚了成员访问机制.下面分别针对数据成员和函数成员是如何访问到的,给出一个大致介绍. 对 ...

  4. What I Have Lived For（我为什么而活着-罗素）

    What I Have Lived For by Bertrand Russell Three passions, simple but overwhelmingly strong, have gov ...

  5. 【LeetCode题意分析&解答】33. Search in Rotated Sorted Array

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  6. python -- 计算数学题--用程序解决问题1

    1.#一个四位数,各位数字互不相同,所有数字之和等于6,并且这个数是11的倍数,#则满足这种要求的四位数有多少个? 代码如下: # -*- coding: UTF-8 -*-import systyp ...

  7. oracle整体知识的大致介绍(1)-概念

    表空间: oracle允许不同类型的数据分开存放,表空间是数据库的逻辑划分. 数据文件: 表空间由同一磁盘上的一个或多个文件组成,这些文件叫做数据文件. 实例: 是存放和控制数据库的软件机制. ora ...

  8. Java Web 入门（一）使用 Intellij IDEA 14.1.5 创建 Maven Web项目

    1.基础配置 1.1 安装 JDK1.7,配置系统变量:JAVA_HOME 和 Path 1.2 安装 Tomcat 7.0 1.3 安装  Intellij IDEA 14.1.5 1.4 Mave ...

  9. Qt容器类的对象模型及应用（线性结构篇）（好多图，比较清楚）

    用Qt做过项目开发的人,肯定使用过诸如QList.QVector.QLinkList这样的模板容器类,它们虽然名字长的不同,但使用方法都大致相同, 因为其使用方法都大体相同,很多人可能随便拿一个容器类 ...

  10. hdoj 1028 Ignatius and the Princess III(区间dp)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1028 思路分析:该问题要求求出某个整数能够被划分为多少个整数之和(如 4 = 2 + 2, 4 = 2 ...