JavaScript的特效
2024-06-07 03:05:12
例1：当光标移动到数据行上，添加背景色，光标离开后，背景色取消，不含表头。
基础代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style>
</head>
<body><table><tr><td>排名</td><td>球队</td><td>胜</td><td>负</td></tr><tr><td>1</td><td>热火</td><td>3</td><td>0</td></tr><tr><td>2</td><td>凯尔特人</td><td>2</td><td>2</td></tr><tr><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//选择一行，该行添加背景色function selectTr(trObj) {}// 离开一行，取消背景色function unselectTr(trObj) {}</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在页面标签加载完毕以后再引入JS文件可以优化用户体验–>-->
</body>
</html>困难：如何给tr行设置样式？具备dom编程能力。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style>
</head>
<body><table><tr><td>排名</td><td>球队</td><td>胜</td><td>负</td></tr><tr onmousemove = "selectTr(this)" onmouseout = "unselectTr(this)"><td>1</td><td>热火</td><td>3</td><td>0</td></tr><tr onmousemove = "selectTr(this)" onmouseout = "unselectTr(this)"><td>2</td><td>凯尔特人</td><td>2</td><td>2</td></tr><tr onmousemove = "selectTr(this)" onmouseout = "unselectTr(this)"><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//选择一行，该行添加背景色function selectTr(trObj) {trObj.className = "selected";}// 离开一行，取消背景色function unselectTr(trObj) {trObj.className = "";}</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在页面标签加载完毕以后再引入JS文件可以优化用户体验–>-->
</body>
</html>在标签中绑定事件，导致代码重复率高，优化 ：js统一来绑定
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style>
</head>
<body><table><tr><td>排名</td><td>球队</td><td>胜</td><td>负</td></tr><tr><td>1</td><td>热火</td><td>3</td><td>0</td></tr><tr><td>2</td><td>凯尔特人</td><td>2</td><td>2</td></tr><tr><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//选择一行，该行添加背景色function selectTr(trObj) {trObj.className = "selected";}// 离开一行，取消背景色function unselectTr(trObj) {trObj.className = "";}// 统一绑定事件// 获取所有的tr——>数组// getElementByTagName根据标签名来获取标签对象var trObjs = document.getElementsByTagName("tr");// console.debug(trObjs.length);for (var i = 1 ; i < trObjs.length ; i++) {// 除了第一行以外的所有行var trObj = trObjs[i];//为每一行绑定事件trObj.onmouseover = function () {selectTr(this);};trObj.onmouseout = function () {unselectTr(this);};}</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在页面标签加载完毕以后再引入JS文件可以优化用户体验–>-->
</body>
</html>例2：全选和取消
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style>
</head>
<body><table><tr><td>全选/取消<input type = "checkbox"/></td><td>排名</td><td>球队</td><td>胜</td><td>负</td></tr><tr><td><input type = "checkbox"/></td><td>1</td><td>热火</td><td>3</td><td>0</td></tr><tr><td><input type = "checkbox"/></td><td>2</td><td>凯尔特人</td><td>2</td><td>2</td></tr><tr><td><input type = "checkbox"/></td><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//选择一行，该行添加背景色function selectTr(trObj) {trObj.className = "selected";}// 离开一行，取消背景色function unselectTr(trObj) {trObj.className = "";}// 统一绑定事件// 获取所有的tr——>数组// getElementByTagName根据标签名来获取标签对象var trObjs = document.getElementsByTagName("tr");// console.debug(trObjs.length);for (var i = 1 ; i < trObjs.length ; i++) {// 除了第一行以外的所有行var trObj = trObjs[i];//为每一行绑定事件trObj.onmouseover = function () {selectTr(this);};trObj.onmouseout = function () {unselectTr(this);};}</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在页面标签加载完毕以后再引入JS文件可以优化用户体验–>-->
</body>
</html>思路：
（1）实现全选和取消的效果
找到相应的复选框，id标识
结合document.getElementById(“choiceCK”)----》input type = checkbox对象
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style>
</head>
<body><table><tr><td>全选/取消<input type = "checkbox" id = "choiceCK"/></td><td>排名</td><td>球队</td><td>胜</td><td>负</td></tr><tr><td><input type = "checkbox"/></td><td>1</td><td>热火</td><td>3</td><td>0</td></tr><tr><td><input type = "checkbox"/></td><td>2</td><td>凯尔特人</td><td>2</td><td>2</td></tr><tr><td><input type = "checkbox"/></td><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//选择一行，该行添加背景色function selectTr(trObj) {trObj.className = "selected";}// 离开一行，取消背景色function unselectTr(trObj) {trObj.className = "";}// 统一绑定事件// 获取所有的tr——>数组// getElementByTagName根据标签名来获取标签对象var trObjs = document.getElementsByTagName("tr");// console.debug(trObjs.length);for (var i = 1 ; i < trObjs.length ; i++) {// 除了第一行以外的所有行var trObj = trObjs[i];//为每一行绑定事件trObj.onmouseover = function () {selectTr(this);};trObj.onmouseout = function () {unselectTr(this);};}//全选和取消的效果//获取全选和取消的复选框var choiceCKObj = document.getElementById("choiceCK");//给全选和取消的复选框绑定单击事件choiceCKObj.onclick = function () { //做事if (choiceCKObj.checked) {//全选console.debug("全选");} else {console.debug("取消");}}</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在页面标签加载完毕以后再引入JS文件可以优化用户体验–>-->
</body>
</html>获取第二、三、四行的复选框，把它们分为一组，使用name属性
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style>
</head>
<body><table><tr><td>全选/取消<input type = "checkbox" id = "choiceCK"/></td><td>排名</td><td>球队</td><td>胜</td><td>负</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>1</td><td>热火</td><td>3</td><td>0</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>2</td><td>凯尔特人</td><td>2</td><td>2</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//选择一行，该行添加背景色function selectTr(trObj) {trObj.className = "selected";}// 离开一行，取消背景色function unselectTr(trObj) {trObj.className = "";}// 统一绑定事件// 获取所有的tr——>数组// getElementByTagName根据标签名来获取标签对象var trObjs = document.getElementsByTagName("tr");// console.debug(trObjs.length);for (var i = 1 ; i < trObjs.length ; i++) {// 除了第一行以外的所有行var trObj = trObjs[i];//为每一行绑定事件trObj.onmouseover = function () {selectTr(this);};trObj.onmouseout = function () {unselectTr(this);};}//全选和取消的效果//获取全选和取消的复选框var choiceCKObj = document.getElementById("choiceCK");//给全选和取消的复选框绑定单击事件choiceCKObj.onclick = function () {//做事if (choiceCKObj.checked) {//全选console.debug("全选");} else {console.debug("取消");}}</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在页面标签加载完毕以后再引入JS文件可以优化用户体验–>-->
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style>
</head>
<body><table><tr><td>全选/取消<input type = "checkbox" id = "choiceCK"/></td><td>排名</td><td>球队</td><td>胜</td><td>负</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>1</td><td>热火</td><td>3</td><td>0</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>2</td><td>凯尔特人</td><td>2</td><td>2</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//选择一行，该行添加背景色function selectTr(trObj) {// trObj.className = "selected";}// 离开一行，取消背景色function unselectTr(trObj) {// trObj.className = "";}// 统一绑定事件// 获取所有的tr——>数组// getElementByTagName根据标签名来获取标签对象var trObjs = document.getElementsByTagName("tr");// console.debug(trObjs.length);for (var i = 1 ; i < trObjs.length ; i++) {// 除了第一行以外的所有行var trObj = trObjs[i];//为每一行绑定事件trObj.onmouseover = function () {selectTr(this);};trObj.onmouseout = function () {unselectTr(this);};}//全选和取消的效果//获取全选和取消的复选框var choiceCKObj = document.getElementById("choiceCK");// 获取name为ballId的所有复选框// getElementByName根据标签中的name属性获取元素对象var ballIdObjects = document.getElementsByName("ballId");// console.debug(ballIdObjects.length);//给全选和取消的复选框绑定单击事件choiceCKObj.onclick = function () {//做事if (choiceCKObj.checked) {//全选// console.debug("全选");for (var i = 0 ; i < ballIdObjects.length ; i++) {ballIdObjects[i].checked = true;}} else {// console.debug("取消");for (var i = 0 ; i < ballIdObjects.length ; i++) {ballIdObjects[i].checked = false;}}};</script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在页面标签加载完毕以后再引入JS文件可以优化用户体验–>-->
</body>
</html>（2）操作行数据中的复选框对全选和取消的影响
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><meta http-equiv = "Content-Type" content = "text/html ; charset = utf-8"/><title>JavaScript的特效</title><style type = "text/css">table{width: 500px;margin: 0 auto;border-spacing: 0;border-collapse: collapse;}table tr{height: 30px;line-height: 30px;}table tr td{border: 1px solid red;text-align: center;}/*添加背景色*/.selected{background-color: pink;}</style>
</head>
<body><table><tr><td>全选/取消<input type = "checkbox" id = "choiceCK"/></td><td>排名</td><td>球队</td><td>胜</td><td>负</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>1</td><td>热火</td><td>3</td><td>0</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>2</td><td>凯尔特人</td><td>2</td><td>2</td></tr><tr><td><input type = "checkbox" name = "ballId"/></td><td>3</td><td>雄鹿</td><td>1</td><td>3</td></tr></table><script type = "text/javascript">//选择一行，该行添加背景色function selectTr(trObj) {// trObj.className = "selected";}// 离开一行，取消背景色function unselectTr(trObj) {// trObj.className = "";}// 统一绑定事件// 获取所有的tr——>数组// getElementByTagName根据标签名来获取标签对象var trObjs = document.getElementsByTagName("tr");// console.debug(trObjs.length);for (var i = 1 ; i < trObjs.length ; i++) {// 除了第一行以外的所有行var trObj = trObjs[i];//为每一行绑定事件trObj.onmouseover = function () {selectTr(this);};trObj.onmouseout = function () {unselectTr(this);};}//全选和取消的效果//获取全选和取消的复选框var choiceCKObj = document.getElementById("choiceCK");// 获取name为ballId的所有复选框// getElementByName根据标签中的name属性获取元素对象var ballIdObjects = document.getElementsByName("ballId");// console.debug(ballIdObjects.length);//给全选和取消的复选框绑定单击事件choiceCKObj.onclick = function () {//做事if (choiceCKObj.checked) {//全选// console.debug("全选");for (var i = 0 ; i < ballIdObjects.length ; i++) {ballIdObjects[i].checked = true;}} else {// console.debug("取消");for (var i = 0 ; i < ballIdObjects.length ; i++) {ballIdObjects[i].checked = false;}}};//操作数据行中的复选框对全选和取消的影响for (var i = 0 ; i < ballIdObjects.length ; i++) {ballIdObjects[i].onclick = function () {if (this.checked) {var cnt = 0;for (var j = 0 ; j < ballIdObjects.length ; j++) {if (ballIdObjects[j].checked) {cnt++;} } if (cnt == ballIdObjects.length) {choiceCKObj.checked = true;} } else {choiceCKObj.checked = false;}}} </script><!--<script type = "javascript" src="../js/me.js"></script>--><!--<!–在页面标签加载完毕以后再引入JS文件可以优化用户体验–>-->
</body>
</html>JavaScript的特效相关推荐
- php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果 看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
- JavaScript文本特效实例小结【3个示例】
本文实例讲述了JavaScript文本特效.分享给大家供大家参考,具体如下: 1.标题跑马灯 常常能够在一些新闻网站,或者其他地方,看到文字在一个特定的区域内,来回滚动.一旦超出边界就消失了,那么这些 ...
- JavaScript网页特效-限时秒杀
限时秒杀是网络商家在某一预定的时间里,大幅度降低活动商品的价格,买家只要在这个时间里成功拍得此商品,便可以用超低的价格买到原本很昂贵的物品的一种营销活动.限时秒杀短时效的限定会给予用户更强烈的紧迫感, ...
- JavaScript网页特效-“渔夫打鱼晒网”程序设计
程序设计时,把可能需要反复执行的代码封装为函数,然后在需要执行该段代码功能的地方进行调用,这样不仅可以实现代码的复用,更重要的是可以保证代码的一致性,只需要修改该函数代码,则所有调用位置均得到体现.同 ...
- JavaScript网页特效-“扫雷”游戏随机布雷功能
"扫雷"游戏是一款经典益智小游戏.游戏目标是在最短的时间内找出所有非雷格子,同时避免踩雷,踩到一个雷即全盘皆输.本节介绍"扫雷"游戏随机布雷功能的设计与实现. ...
- 《JavaScript网页特效经典300例》
<JavaScript网页特效经典300例> 基本信息 作者: 杨磊 张志美 丛书名: 百炼成钢系列丛书 出版社:电子工业出版社 ISBN:9787121220524 上架时间:20 ...
- JavaScript网页特效-浮现社会主义核心价值观文字动画效果
1.案例呈现 用户在页面单击鼠标左键,页面浮现"富强"."民主"."文明"."和谐"."自由".&q ...
- Javascript相框特效
一款Javascript相框特效,效果效果可以参考: [url]http://www.zakisoft.com/html/effect2/effect2.html[/url] 运行效果图: [img] ...
- [导入]JavaScript 滚动特效代码
摘要: 注意:以下代码特效放到页面中时,如果html顶部加入了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
- 实用JavaScript网页特效编程百宝箱pdf
下载地址:网盘下载 内容介绍 编辑 计算机的出现是人类历史上的伟大创举,因为它正在彻底改变着人们生活中的方方面面,网络化的计算机更是日益渗透到社会发展的各个应用领域,从20世纪五六十年代网络雏形发展到 ...
最新文章
- php本页面调试报错配置
- carsim学习笔记4——构建路面
- 定时任务 - 定时任务弊端与优化方案
- ie8 object param没有效果_如何用php实现分页效果
- 如何用TensorFlow实现人工智能？
- linux编辑java文本,linux下的文本编辑器VI的使用命令
- 开篇-.net与.net framework和C#的关系与区别，历史沿革
- 数据结构和算法 数论 素数/质数、回文素数
- 研究了一晚上,填补了中国古代神话中的一些空白
- 【EduCoder答案】循环结构程序设计1
- linux环境下，实现公共聊天室功能
- Arch Linux 安装 Anbox
- Android 网络框架 Retrofit2.0介绍、使用和封装
- JAVA:实现CircularBuffer环形缓冲器算法(附完整源码)
- 音视频行业玩家必读，如何实现生态合作+商业变现
- 【Metasploit】MSF常用命令
- 我爱你用计算机怎么表示,特殊密码表示我爱你
- 推动线下网吧转型 京东Game+ CEST总决赛圆满落幕
- 求助如何写这种复杂的影射关系文件
- Revit建模｜怎么创建轴网标高？