<!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. js取两个数组的交集|差集|并集|补集|去重示例代码

    http://www.jb51.net/article/40385.htm 代码如下: /** * each是一个集合迭代函数,它接受一个函数作为参数和一组可选的参数 * 这个迭代函数依次将集合的每一 ...

  2. ASP.NET 状态服务 及 session丢失问题解决方案总结

    ASP.NET2.0系统时,在程序中做删除或创建文件操作时,出现session丢失问题.采用了如下方法:1.asp.net Session的实现:asp.net的Session是基于HttpModul ...

  3. EasyUI-validatebox 自定义validType验证

    根据项目要求,对于一些信息的验证也越来越特殊,当你发现EasyUI-validatebox提供的常用的validType验证类型已经满足不了你时,你可以选择自己自定义新的validType来完成信息验 ...

  4. position absolute 绝对定位 设置问题

     今天在做布局的时候,用到了绝对定位, 父级元素相对定位,子元素两个,一个元素正常文档流布局并且在前面,另一个元素绝对定位排在后面,但设置了好久,绝对定位的子元素都不会覆盖其上面的兄弟元素,最后,不知 ...

  5. Android BadgeView使用

    BadgeView是第三方的插件,用来显示组件上面的标记,起到提醒的作用,下载地址如下:http://files.cnblogs.com/files/hyyweb/android-viewbadger ...

  6. MySQL自定义函数例子

    -- 根据ID查询对应行的name CREATE FUNCTION function_first (id INT) --创建 BEGIN --开始 ); --声明变量,必须写在第一行,每一个变量最好单 ...

  7. centos6.7 mutlipath install script

    #!/bin/bash if [ `id -g` != 0 ] ;then echo -e "\033[31m Please use root user\033[0m" exit ...

  8. apache2.4以上版本配置虚拟主机

    一  将 主配置文件 httpd.conf中 #Include conf/extra/httpd-vhosts.conf 前面的# 去掉 二  进入conf/extra 修改 /conf/extra/ ...

  9. JQuery筛选器全系列介绍

    jQuery提供了强大的选择器让我们获取对象.在这边,我人为地将jQuery选择器分为两大部分:选择对象和筛选条件.选择对象表示要获取什么对象,筛选条件是对获取的对象进行筛选,最终留下符合某些特征的对 ...

  10. Python正则化学习