<!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. react native改变app的图标和名称

    beauty\android\app\src\main\res

  2. ImageList图标左边有黑色竖线

    ImageList图标左边有黑色竖线, 原因 ImageList颜色深度太小引起的,解决方案,把颜色深度调成Depth32Bit 默认: 修改为: 结果: 备注:根据文件获得文件的系统图标: Icon ...

  3. gradle相关配置内容解析

    gradle 项目的构建工具,基于groovy语言.主要用于管理依赖包. as中一般将gradle下载在C:\Documents and Settings<用户名>.gradle\wrap ...

  4. C#知识点总结系列：5、CLR的组成和运转

    clr基本 CLR(Common Language Runtime)是一个可由多种编程语言使用的“运行时”.(例如:c#,c++/cli,vb,f#,ironpython,ironruby,il... ...

  5. windows PHONE 开发-入门程序构筑

    1:页面的扩展名为:.xaml文件类似于ASPX一样可以编写客户端显示内容和后台处理内容 一般的前台页面的形式为: <Page x:Class="MyFirstApp.MainPage ...

  6. ThinkPHP开启事物

    $m=D('YourModel');//或者是M(); $m2=D('YouModel2'); $m->startTrans();//在第一个模型里启用就可以了,或者第二个也行 $result= ...

  7. java appium api

    Appium中部分api的使用方法,有需要的朋友可以参考下. 使用的语言是java,appium的版本是1.3.4,java-client的版本是java-client-2.1.0,建议多参考java ...

  8. 关于STM32的抢占式优先级说明。——Arvin

    关于STM32的中断设置.--Arvin 中断 STM32 很多人在配置STM32中断时对固件库中的这个函数NVIC_PriorityGroupConfig()配置优先级分组方式,会很不理解,尤其是看 ...

  9. nodejs的第五天学习笔记

    一.调试nodejs代码 1)使用console.log() 使用麻烦,用了以后还要删除 2)nodejs的自带调试器 -node debug a.js 没有任何作用,一个玩具,将来有一天可以会变得强 ...

  10. 【Mxnet】----1、使用mxnet训练mnist数据集

    使用自己准备的mnist数据集,将0-9的bmp图像分别放到0-9文件夹下,然后用mxnet训练. 1.制作rec数据集 (1).制作list