效果图：

代码：

<!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. Android Studio 新建项目的R文件丢失的解决方法

    最近Android Studio炒的比较热,于是笔者决定赶赶时髦,从Eclipse转到了Android Studio.不幸的是,用Android Studio创建项目的时候就遇到了一个比较尖锐的问题— ...

  2. Buffer Cache（缓冲区缓存）篇：缓存区块大小

    缓冲区缓存(Buffer Cache) Buffer Cache是SGA的一部分,保存最近从磁盘读取的或修改的(dml修改或添加)数据块.Buffer Cache的目的就是减少磁盘I/O,提高速度. ...

  3. nginx服务器屏蔽上游错误码

    平时的开发工作中,有时会遇到脚本权限不对导致403,文件被删除导致404,甚至后端业务异常导致5xx等情况,其实我们可以在服务器加上判断,检测当后端服务出现异常的时候前端返回一个指定的静态文件(也可以 ...

  4. 双网卡绑定（suse）

    网卡绑定技术有助于保证高可用性特性并提供其它优势以提高网络性能,Linux双网卡绑定实现就是使用两块网卡虚拟成为一块网卡,这个聚合起来的设备看起来是一个单独的以太网接口设备,就是两块网卡具有相同的IP ...

  5. The Longest Straight（二分，离散化）

     Problem 2216 The Longest Straight Accept: 7    Submit: 14 Time Limit: 1000 mSec    Memory Limit : 3 ...

  6. SVN 让项目某些文件不受版本控制

    @echo On @Rem 删除SVN版本控制目录 @PROMPT [Com] @for /r . %%a in (.) do @if exist "%%a\.svn" rd /s ...

  7. android 在新建短信时，加入名称为","(英文逗号)的联系人时，应用崩溃的修改

    请修改文件 /alps/frameworks/ex/chips/src/com/android/ex/chips/RecipientAlternatesAdapter.java private sta ...

  8. iOS --- [持续更新中] iOS移动开发中的优质资源

    在我们做iOS APP的开发过程中, 须要非常多设计, 产品, 技术, 运营等方面的技巧和资源. 现将其整理汇总, 本文会一直持续更新. 敬请关注. 设计 Dribbble Dribbble是一个面向 ...

  9. MYSQL大小写（由于数据由windows迁移到Linux导致）

    今日从sqlserver上迁移了一个数据库到Linux的MySQL中,迁移成功了,但是应用却跑不通,查看日志发现,提示找不到表,我注意到,表名都是存在大小写的,而MySQL中的表名都是小写的.这提醒了 ...

  10. java结构与算法之选择排序

    一 .java结构与算法之选择排序(冒择路兮快归堆) 什么事选择排序:从一组无序数据中选择出中小的的值,将该值与无序区的最左边的的值进行交换. 简单的解释:假设有这样一组数据 12,4,23,5,找到 ...