Js实现网站常用的评分效果!

简介: View Code DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">    网站评分特效            *        {            font-size: 50px;        }     ...
img_405b18b4b6584ae338e0f6ecaf736533.gif View Code
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< html >
< head >
    
< title > 网站评分特效 </ title >
    
< style  type ="text/css" >
        *
        
{
            font-size
:  50px ;
        
}
    
</ style >
    
< script  language ="javascript"  type ="text/javascript" >
        
function  indexOf(arr, element) {             // 在Js中自己写indexOf方法;
             for  ( var  i  =   0 ; i  <  arr.length; i ++ ) {
                
if  (arr[i]  ==  element) {
                    
return  i;
                }
            }
            
return   - 1 ;
        }

        
function  CommentLevel() {
            
var  CommentLevel  =  document.getElementById( " CommentLevel " );
            
var  tds  =  document.getElementsByTagName( " td " );  // 获取CommentLevel表格下的td,不处理其他表格中的td;
             for  ( var  i  =   0 ; i  <  tds.length; i ++ ) {
                
var  td  =  tds[i];     // 获取每个td;
                td.onmouseover  =  TdOnClick;
                td.style.cursor 
=   " pointer " ;
            }
        }

        
function  TdOnClick() {
            
var  CommentLevel  =  document.getElementById( " CommentLevel " );
            
var  tds  =  document.getElementsByTagName( " td " );  // 获取CommentLevel表格下的td,不处理其他表格中的td;
             var  index  =  indexOf(tds,  this );  // 获取当前点击位置;

            
for  ( var  i  =   0 ; i  <=  index; i ++ ) {   // 点击之前的都变红;
                tds[i].innerText = " " ;
            }

            
for  ( var  i  =  index  +   1 ; i  <  tds.length; i ++ ) {   // 点击之后的是白色;
                tds[i].innerText = " " ;
            }

        }
    
</ script >
</ head >
< body  onload ="CommentLevel()" >
    
< table  id ="CommentLevel" >
        
< tr >
            
< td >
                
            
</ td >
            
< td >
                
            
</ td >
            
< td >
                
            
</ td >
            
< td >
                
            
</ td >
            
< td >
                
            
</ td >
        
</ tr >
    
</ table >
</ body >
</ html >
目录
相关文章
|
2月前
|
JavaScript 前端开发 UED
网站内容禁止复制的js代码
【10月更文挑战第2天】
|
3月前
|
JavaScript
网站内容禁止复制的js代码
网站内容禁止复制的js代码
|
4月前
|
数据采集 存储 JavaScript
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
本文介绍了如何使用Python编写网络爬虫程序爬取书旗网上的小说数据,并通过逆向工程对抗网站的反爬机制,最后对采集的数据进行可视化分析。
203 2
基于Python 爬书旗网小说数据并可视化,通过js逆向对抗网站反爬,想爬啥就爬啥
|
4月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML、CSS与JavaScript之旅
在这个数字时代,拥有一个个性化的网络空间已成为许多人的梦想。本文将引导你了解如何从零开始,使用HTML、CSS和JavaScript创建属于自己的博客网站。我们将探索这些技术的基础概念,并通过实际代码示例展示如何将静态页面转变为动态交互式网站。无论你是编程新手还是希望扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。【8月更文挑战第31天】
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的在线音乐网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的在线音乐网站附带文章源码部署视频讲解等
66 2
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的传统文化网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的传统文化网站附带文章源码部署视频讲解等
36 1
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的经典电影推荐网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的经典电影推荐网站附带文章源码部署视频讲解等
30 1
|
5月前
|
JavaScript 前端开发
【vue】 网站动态背景 | vanta.js的使用
【vue】 网站动态背景 | vanta.js的使用
480 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的学习网站系统附带文章源码部署视频讲解等
41 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的自助甜品网站附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的自助甜品网站附带文章源码部署视频讲解等
31 0