JavaScript星级评分,仿百度,增强版
JavaScript星级评分,仿百度,增强版
<!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>
<title>JavaScript星级评分,仿百度,增强版</title>
<style type="text/css">
.wrapper{left:100px;top:100px}
tr,td{font-size:66px;color:#000000;background:#ffffff;}
</style>
<script type="text/javascript">
function ArrayIndexOf(arr, element) {
for (var i = 0; i < arr.length; i++) {
if (arr[i] == element) {
return i;
}
}
return -1;
}
function GetTds() {
var tbl = document.getElementById("tblMain");
var tds = tbl.getElementsByTagName("td");
return tds;
}
function InitEvent() {
var tds=GetTds();
for (var i = 0; i < tds.length; i++) {
var td = tds[i];
td.onmouseover = TdOnclick;
td.style.cursor = "pointer"; }
}
function TdOnclick() {
var tds = GetTds();
var index = ArrayIndexOf(tds, this); //this用得传神
if (index < 0) {
return;
}
for (var i = 0; i <=index; i++) {
var td = tds[i];
td.innerHTML = "★";
switch (i) {
case 0:
tds[5].innerText = "很差";
break;
case 1:
tds[5].innerText = "较差";
break;
case 2:
tds[5].innerText = "还行";
break;
case 3:
tds[5].innerText = "推荐";
break;
case 4:
tds[5].innerText = "力荐";
break; }
}
for (var j = index + 1; j < tds.length-1; j++) { //错误j写成了i
var td = tds[j];
td.innerHTML = "☆";
}
} </script>
</head>
<body onload="InitEvent()" class="wrapper">
<table id="tblMain">
<tr><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td>☆</td><td style="font-size:30px;width:45px"></td></tr>
</table>
</body>
</html>
JavaScript星级评分,仿百度,增强版的更多相关文章
- javascript星级评分(多个)
JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...
- JavaScript星级评分
事件onmouseover <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- 原生javascript星级评分
写个最简单的原生js的星级评分: <div id="rank" class="pingfen"> <ul> <li>< ...
- js仿百度文库文档上传页面的分类选择器_第二版
仿百度文库文档上传页面的多级联动分类选择器第二版,支持在一个页面同一时候使用多个分类选择器. 此版本号把HTML,CSS,以及图片都封装到"category.js"中.解决因文件路 ...
- 高仿百度传课应用客户端源码iOS版
高仿百度传课iOS版,版本号:2.4.1.2 运行环境:xcode6.3 ios8.3 (再往上系统没有测试) 转载请注明出处,不可用于商业用途及不合法用途. 如果你觉得不错,欢迎 star 哦 ...
- JavaScript仿百度图片浏览效果(转载)
转载来源:https://www.jb51.net/article/98030.htm 这是一个非常好的案例,然而jquery的时代正在徐徐关闭. 当你调整浏览器宽高,你会发现它不是自适应的.当你想把 ...
- Springboot+Vue实现仿百度搜索自动提示框匹配查询功能
案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...
- 读书笔记:JavaScript DOM 编程艺术(第二版)
读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...
- WPF仿百度Echarts人口迁移图
GitHub地址:https://github.com/ptddqr/wpf-echarts-map/tree/master 关于大名鼎鼎的百度Echarts我就不多说了 不了解的朋友直接看官方的例子 ...
随机推荐
- var和let的区别(详解)
1. 作用域 通过var定义的变量,作用域是整个封闭函数,是全域的 . 通过let定义的变量,作用域是在块级或是子块中. function varTest() { var x = 1; if (tru ...
- Form Template Method
<重构>中此方法叫做塑造模板函数,在设计模式中,对应的模式就是模板模式.重构中的很多变动比较大的方法都会导致重构,但重构中有非常多的小重构手法.就好像建筑一个房子,设计模式教你厨房客厅怎么 ...
- POJ 2421 Constructing Roads (Kruskal算法+压缩路径并查集 )
Constructing Roads Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 19884 Accepted: 83 ...
- Hihocoder #1014 : Trie树 (字典数树统计前缀的出现次数 *【模板】 基于指针结构体实现 )
#1014 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助, ...
- FZU2150 Fire Game —— BFS
题目链接:https://vjudge.net/problem/FZU-2150 Problem 2150 Fire Game Accept: 2702 Submit: 9240 Time Li ...
- js中获取时间new date()的用法 获取时间:
获取时间: 1 var myDate = new Date();//获取系统当前时间 获取特定格式的时间: 1 myDate.getYear(); //获取当前年份(2位) 2 myDate.getF ...
- android 一个TextView设置多种颜色
时候一个文本框为了强调内容需要显示不同颜色,用以下代码可以轻松实现 方法一:(适用于颜色变化多的情况) //为文本框设置多种颜色 textView=(TextView)findViewById(R ...
- UVA-10600(次小生成树)
题意: 现在给一个图,问最小生成树和次小生成树的权值和是多少; 思路: 求最小生成树的两种方法,次小生成树是交换最小生成树的其中一条边得到的,现在得到了最小生成树,枚举不在次小生成树中的边,再求一边最 ...
- BZOJ3355
3355: [Usaco2004 Jan]有序奶牛 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 37 Solved: 19[Submit][Sta ...
- Babel转码器
Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有环境执行.这意味着,你可以用ES6的方法 编写程序,又不用担心现在环境是否支持.