zoukankan      html  css  js  c++  java
  • 「网易官方」极客战记(codecombat)攻略-网页开发2-消失活动-disappearing-act

    (点击图片进入关卡)

    使元素消失和出现!惊吓你的敌人,迷惑你的朋友。

    简介

    show() 和 hide() 这两个jQuery函数分别让元素出现和消失。

    默认代码

    <!-- JavaScript可以用来显示和隐藏元素! -->

     

    <script>
        var showButton = $("#showButton");
        // 创建变量'hideButton'来存储#hideButton

     

        var image = $("#image");
        function showElement() {
            image.show();
        }
        function hideElement() {
            // 在图像变量上使用“hide()”函数:

     

        }
        showButton.on("click", showElement);
        // 添加一个事件监听器到hideButton变量。
        // 当“点击”发生时,它应该执行HielEng:

     

    </script>
    <style>
        body {
            text-align:center;
        }
        button {
            25%;
            height:64px;
        }
        img {
            50%;
        }
    </style>
    <button id="showButton">显示</button>
    <button id="hideButton">隐藏</button>
    <br>
    <img id="image"
    src="http://direct.codecombat.com/file/db/thang.type
    /57586f0a22179b2800efda37/portrait.png"/>

    概览

    #隐藏并显示

    在元素上调用 hide() 会使元素从屏幕上消失!

    与此相反, show() 则会让元素按照隐藏前的样子重新出现。 (除非在隐藏时进行过更改!)

    挂接到 "click" 事件则可以为需要的隐藏和显示行为编写强大的脚本!

    消失活动 解法

    <!-- JavaScript可以用来显示和隐藏元素! -->

     

    <script>
        var showButton = $("#showButton");
        // 创建变量'hideButton'来存储#hideButton
        var hideButton = $("#hideButton");
        var image = $("#image");
        function showElement() {
            image.show();
        }
        function hideElement() {
            // 在图像变量上使用“hide()”函数:
            image.hide()
        }
        showButton.on("click", showElement);
        // 添加一个事件监听器到hideButton变量。
        // 当“点击”发生时,它应该执行HielEng:
        hideButton.on("click", hideElement);
    </script>
    <style>
        body {
            text-align:center;
        }
        button {
            25%;
            height:64px;
        }
        img {
            50%;
        }
    </style>
    <button id="showButton">显示</button>
    <button id="hideButton">隐藏</button>
    <br>
    <img id="image"
    src="http://direct.codecombat.com/file/db/thang.type
    /57586f0a22179b2800efda37/portrait.png"/>
     

    本攻略发于极客战记官方教学栏目,原文地址为:

    https://codecombat.163.com/news/jikezhanji-xiaoshihuodong

    极客战记——学编程,用玩的!

  • 相关阅读:
    Oracle EBS 技术顾问常用的PL/SQL工具
    ORACLE EBS 计划功能 理论整理
    Oracle SQL 空值排序(Nulls)
    Oracle数据库中表的四种连接方式讲解
    JVM学习笔记之CodeCache
    Java序列化的作用和反序列化
    Spring MVC framework深入分析之一总体分析
    SpringMVC 拦截器实现分析
    Spring MVC framework深入分析之三执行过程
    Ajax应用开发:实践者指南
  • 原文地址:https://www.cnblogs.com/codecombat/p/12918831.html
Copyright © 2011-2022 走看看