<!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. 解决Spark读取Hive分区表出现Input path does not exist的问题

    假设这里出错的表为test表. 现象 Hive读取正常,不会报错,Spark读取就会出现: org.apache.hadoop.mapred.InvalidInputException: Input ...

  2. 微信小程序-发起请求

    wx.request(object) wx.request发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. object参数说明: 示例代码: wx.request({ url: ...

  3. Markdown中插入数学公式的方法

    Markdown中插入数学公式的方法 文章来源:http://blog.csdn.net/xiahouzuoxin/article/details/26478179 自从使用Markdown以来,就开 ...

  4. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  5. Qt编程'""hello world

    #include<QApplication>#include<QLabel>int main(int argc,char*argv[]){QApplicatin app(arg ...

  6. linux下使用多线程编写的聊天室

    自从开始学linux网络编程后就想写个聊天室,一开始原本打算用多进程的方式来写,可是发觉进程间的通信有点麻烦,而且开销也大,后来想用多线程能不能实现呢,于是便去看了一下linux里线程的用法,实际上只 ...

  7. weex 小结 -- <list>

    可以包含各种子组件 <refresh style="width:750;padding:30;flex-direction:row;justify-content:center;&qu ...

  8. aspx页面常用代码

    Response.Redirect(Request.Url.ToString());//刷新页面 Response.Write("<script>alert('有数据尚未添加') ...

  9. c语言的continue

    continue 是跳过此次循环的剩下部分,直接进入下个循环.

  10. [WPF]MenuItem右侧空白

    <Window> <Grid Background="SteelBlue"> <Grid.ContextMenu> <ContextMen ...