<!DOCTYPE html>

<html>

<head>

    <title>查看更多</title>

    <meta charset="utf-8">

    <style type="text/css">

        button {

            display:block;

        }

        a {

            margin-top:60px;

            text-decoration:none;

            color:#2D5A87;

            display:block;

        }

          div {

              margin:auto;

              width:200px;

          }

          p {

              font-size:13px;

          }

        .none {

            display:none;

        }

    </style>

</head>

<body>

    <div>

    <p></p>

    <p></p>

    <p></p>

    <p></p>

    <p></p>

    <p class="none"></p>

    <p class="none"></p>

    <button id="watchmore">查看更多</button>

    <a href="../js project.html">返回主界面</a>

    </div>

    <script type="text/javascript">

        function getElementsByClassName (className) {

                   var all = document.getElementsByTagName('*');

                   var elements = new Array();

                   for (var e = ; e < all.length; e++) {

                     if (all[e].className == className) {

                        elements[elements.length] = all[e];

                           break;

                      }

                }

                   return elements;

            }

        window.onload = function(){

            var watch = document.getElementById('watchmore');

            var op =document.getElementsByClassName('none');

            watch.onclick = function(){

                if(watch.innerHTML == "查看更多"){

                    for(var i=; i<op.length; i++){

                        op[i].style.display = "block";

                        watch.innerHTML = "隐藏";

                    }

                }

                else {

                    for(var i=; i<op.length; i++){

                        op[i].style.display = "none";

                        watch.innerHTML = "查看更多";

                    }

                }

            }

        }

    </script>

</body>

</html>

用自定义getElementByClassName函数做“查看更多”的特效的更多相关文章

  1. Date( )方法 章节中，你可以查看更多关于日期转换为字符串的函数

    在 Date 方法 章节中,你可以查看更多关于日期转换为字符串的函数: 方法 描述 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31). getDay() 从 Date 对象 ...

  2. 前端自定义format函数，做字符串格式化功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Oracle自定义聚集函数

    今天工作中看见别人写的自定义聚集函数,所以一门心思的想搞懂,就在网上找资料了. 自定义聚集函数 自定义聚集函数接口简介 Oracle提供了很多预定义好的聚集函数,比如Max(), Sum(), AVG ...

  4. Python：Base4（map，reduce，filter，自定义排序函数（sorted），返回函数，闭包，匿名函数（lambda） ）

    1.python把函数作为参数: 在2.1小节中,我们讲了高阶函数的概念,并编写了一个简单的高阶函数: def add(x, y, f): return f(x) + f(y) 如果传入abs作为参数 ...

  5. @JsonCreator自定义反序列化函数-JSON框架Jackson精解第5篇

    Jackson是Spring Boot(SpringBoot)默认的JSON数据处理框架,但是其并不依赖于任何的Spring 库.有的小伙伴以为Jackson只能在Spring框架内使用,其实不是的, ...

  6. Matlab中如何将（自定义）函数作为参数传递给另一个函数

    假如我们编写了一个积分通用程序,想使它更具有通用性,那么可以把被积函数也作为一个参数.在c/c++中,可以使用函数指针来实现上边的功能,在matlab中如何实现呢?使用函数句柄--这时类似于函数指针的 ...

  7. ashx ajax 与 自定义javascript函数

    1.getUserPower为自定义javascript函数 获取权限  (1).ashx 处理程序的相对地址(必须是相对地址)  (2).au 权限名称  (3).classname 类名  (4) ...

  8. 权限管理之基于ACL的实现：自定义JSTL函数实现即时认证

    实现即时认证(即只有拥有相应的权限,才能做相应的操作) 经常用在,在JSP页面上,调用JSTL自定义函数做判断,显示相应的菜单或者功能按钮,比如只有管理员登陆时才显示“删除”按钮,从而完成权限的即时认 ...

  9. PHPCMS快速建站系列之自定义分页函数

    内容分页的实现方法:{pc:content action="lists" catid="$catid" order="id DESC" nu ...

随机推荐

  1. TryUpdateModel

    MSDN参考 https://msdn.microsoft.com/zh-cn/library/system.web.mvc.controller.tryupdatemodel.aspx 相关博文 h ...

  2. windows平台解决quick3.5final + sublimeText3 模拟器找不到的问题

    下载了quick3.5 准备在sublime上进行开发,结果发现quick3.5中的player模拟器不见了,原来模拟器移到了quick引擎主目录下的 /tools/simulator/runtime ...

  3. SVN分支和映射总结和数据库初步使用

    SVN使用总结 常用的诸如检出,update,add就不说了. 1.创建分支-----新建分支目录,在分支文件夹下导入项目folder文件夹.分支不会影响主干trunk的代码,可以随意修改. 2.sv ...

  4. 《C++ Primer》学习笔记【第三部分 类设计者的工具】

    第13章 拷贝控制 使用default:=defult只能修饰默认构造函数或拷贝控制成员,显式地要去编译器生成合成的版本. 使用delete:=delete通知编译器不希望定义这些成员,禁止试图使用它 ...

  5. Linux安装时内存如何分区的相关问题

    Linux系统安装时内存如何分区:Linux系统必须的分区是根分区(/)和swap交换分区.普通用户一般分三个区,一个根分区(/),一个家目录(home分区),一个交换分区(swap分区),以80G的 ...

  6. javascript学习内容--object.style.display="value" value值为“”none“隐藏”或 "block"显示

    <head> var mychar=document.getElementById("con"); function hidden(){ mychar.style.di ...

  7. javascript实现简单的轮播图片

    方法一: <script> var curIndex=0;//时间间隔(单位毫秒),每秒钟显示一张,数组共有5张图片放在Photos文件夹下. var timeInterval=1000; ...

  8. 了解Android的编译器

    了解一下Android的编译器并记录下来: Android在4.4以前是使用Dalvik VM的,通过Just In Time(JIT即时编译)来完成编译工作,在Android4.4提供了一种测试版本 ...

  9. HTML 的 meta 标签

    我们先来看看维基百科上对 meta element 的定义: Meta elements are tags used in HTML and XHTML documents to provide st ...

  10. express+gulp构建项目（二）启动项目和主文件

    这一次整理的内容是项目主文件和如何启动项目. 启动项目 通过nodejs官网的例子https://nodejs.org/docs/latest-v4.x/doc/api/synopsis.html我们 ...