效果图：

代码：

<!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. Java 网络编程（一） 网络基础知识

    链接地址:http://www.cnblogs.com/mengdd/archive/2013/03/09/2951826.html 网络基础知识 网络编程的目的:直接或间接地通过网络协议与其他计算机 ...

  2. [C#绘图]Matrix类

    想要从入门到精通一门语言,最好的学习文档就是官方提供的文档,比如说OpenCV的学习,最权威的学习资料还是其官方的学习文档,C#和.net的最好的学习入门文档还是MSDN.但是好多人一开始真的不会用, ...

  3. C#中小函数的应用

    今天看到的一段函数 StringBuilder sb = new StringBuilder("sselect * from table where 1=1"); if(TextB ...

  4. A Byte of Python 笔记（5）函数：定义、形参、局部变量、默认参数、关键参数

    第7章  函数 函数是重要的程序段.它们允许你给一块语句一个名称,然后你可以在程序的任何地方使用这个名称任意多次地运行这个语句块.这被称为 调用 函数. 定义函数 函数通过 def 关键字定义.def ...

  5. idea中使用sbt构建scala项目及依赖

    1.安装scala插件 http://www.cnblogs.com/yrqiang/p/5310700.html 2. 详细了解sbt: http://www.scala-sbt.org/0.13/ ...

  6. 【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 ...

  7. C语言(2)--数据类型

    C语言中提供多种不同的数据类型,用以存放不同的数据. 1.常见的基本类型有:int-->整型 float-->浮点型 double-->双精度浮点型 char-->字符型 NO ...

  8. 玩转无线 — GNURADIO 简单运用

    大家好, 我是Insight-labs的旺财,这里放出个旺财在Bsides Toronto 2013 会上RF-Ninjia Hacking议题中的一个案例,随着物联网越来越火热,而物联网又离不开无线 ...

  9. Qt多线程编程总结（一）（所有GUI对象都是线程不安全的）

    Qt对线程提供了支持,基本形式有独立于平台的线程类.线程安全方式的事件传递和一个全局Qt库互斥量允许你可以从不同的线程调用Qt方法. 这个文档是提供给那些对多线程编程有丰富的知识和经验的听众的.推荐阅 ...

  10. lwp 模拟行锁堵塞 前端超时

    jrhmpt01:/root/async# cat a2.pl use LWP::UserAgent; use utf8; use DBI; use POSIX; use HTTP::Date qw( ...