效果图：

代码：

<!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++）

    声明    : 仅一张图片转载于http://www.cnblogs.com/shuaiwhu/archive/2012/04/22/2464583.html,自己画太麻烦了...那个博客的讲解也很好 ...

  2. JavaSE_ IO流 总目录(19~22)

    JavaSE学习总结第19天_IO流119.01 集合的特点和数据结构总结19.02 如何选择使用哪种集合19.03 集合常见功能和遍历方式总结19.04 异常的概述和分类19.05 JVM默认处理异 ...

  3. 求新的集合 A=AUB(顺序表)

    #include<stdio.h> typedef int A; const int LIST_INIT_SIZE=100; const int LISTINCREMENT=10; typ ...

  4. eclipse集成jetty开发web项目（不采用maven方式）

    以前开发过程部署项目都是采用tomcat,偶然发现jetty,所以试了下,挺方便的,直切主题. 1.下载jetty,楼主使用的jetty8,地址http://download.eclipse.org/ ...

  5. Android 使用 intent 实现简单登陆页面

    前言 第一个 Android 程序,应该有些纪念的意义吧~ 主页面布局 给 Button 添加响应函数:android:onClick="login" public void lo ...

  6. git版本控制的笔记

    一.配置你的身份,提交代码时git就可以知道是谁提交的了 git config --global user.name "Tony" git config --global user ...

  7. PICC国际标准ISO14443下载

    ISO 14443:第一部分规定了PICC的物理特性.接近卡(PICC)国际标准ISO14443-1点击下载 ISO 14443:第二部分规定了PICC的射频功率和信号接口. 接近卡(PICC)国际标 ...

  8. Protel99se教程三:新建PCB文件以及PCB基本设定

    在上一课,我们绘制好SCH原理图后,在这一节课开始,我们介绍,如何将SCH转化成PCB文件,在这一节课,我们主要给大家讲解,如果新建PCB文件以及载入封装图. 第一步:在Documents目录下,新建 ...

  9. java代码发送JSON格式的httpPOST请求

    package com.test; import java.io.BufferedReader; import java.io.DataOutputStream; import java.io.IOE ...

  10. Java-多线程的实现与启动

    class mythread extends Thread  //多线程的启动 {  private String name;  public mythread(String name)  {   t ...