<!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. JavaScript对象的chapterI

    对象: 对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体. 一.本地对象: 1.Date——日期对象 var myDate = new Date(); myDate.getFullYe ...

  2. ubuntu 14.04 vsftpd安装问题

    sudo apt-get install vsftpd; 打开允许访问用户名 local_enable=YES write_enable=YES chroot_list_file=/etc/vsftp ...

  3. 微信小程序-WebSocket

    wx.connectSocket(OBJECT) 创建一个 WebSocket 连接:一个微信小程序同时只能有一个 WebSocket 连接,如果当前已存在一个 WebSocket 连接,会自动关闭该 ...

  4. 软件工程（C编码实践篇）总结

    陆伟丹 + 原创作品转载请注明出处 + <软件工程(C编码实践篇)>MOOC课程http://mooc.study.163.com/course/USTC-1000002006 对软件工程 ...

  5. Openstack+Kubernetes+Docker微服务实践之路--RPC

    重点来了,本文全面阐述一下我们的RPC是怎么实现并如何使用的,跟Kubernetes和Openstack怎么结合.  在选型一文中说到我们选定的RPC框架是Apache Thrift,它的用法是在Ma ...

  6. Hibernate学习笔记（二）

    2016/4/22 23:19:44 Hibernate学习笔记(二) 1.1 Hibernate的持久化类状态 1.1.1 Hibernate的持久化类状态 持久化:就是一个实体类与数据库表建立了映 ...

  7. Mac 下 PostgreSQL 的安装与使用

    在 mac 下,可以利用 homebrew 直接安装 PostgreSQL: 1 brew install postgresql -v 稍等片刻,PostgreSQL 就安装完成.接下来就是初始数据库 ...

  8. Linux启动/停止/重启Mysql数据库的方法

    1.查看mysql版本 方法一:status; 方法二:select version(); 2.Mysql启动.停止.重启常用命令 a.启动方式 1.使用 service 启动: [root@loca ...

  9. 【转】linux下安装ssh服务器端及ssh的安全配置

    一.在服务器上安装ssh的服务器端. $ sudo apt-get install openssh-server 2. 启动ssh-server. $ /etc/init.d/sshrestart 3 ...

  10. iOS - Regex 正则表达式

    1.Regex 定义 正则表达式又称正规表示法.常规表示法(英语:Regular Expression,在代码中常简写为 regex.regexp 或 RE),计算机科学的一个概念.正则表达式使用单个 ...