zoukankan      html  css  js  c++  java
  • 【JS学习】慕课网4-1编程挑战 函数

    要求:小伙伴们,请编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数,点击相应按钮执行相应操作,点击"取消设置"按钮后,提示是否取消设置,如是执行操作,否则不做操作。

    需要注意的是恢复函数命名为reset时候是无效的,必须改为别的名字。因为reset是保留关键字 见http://www.w3cschool.cc/js/js-reserved.html

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
    <title>javascript</title>
    <style type="text/css">
    body{font-size:12px;}
    #txt{
        height:400px;
        600px;
        border:#333 solid 1px;
        padding:5px;}
    p{
        line-height:18px;
        text-indent:2em;}
    </style>
    </head>
    <body>
      <h2 id="con">JavaScript课程</H2>
      <div id="txt"> 
         <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
            <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p>
            <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
            <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
      </div>
      <form>
      <!--当点击相应按钮,执行相应操作,为按钮添加相应事件-->
        <input type="button" value="改变颜色"  onclick="changecolor()">  
        <input type="button" value="改变宽高" onclick="changewh()">
        <input type="button" value="隐藏内容" onclick="hide()">
        <input type="button" value="显示内容" onclick="display()">
        <input type="button" value="取消设置" onclick="recover()">
      </form>
      <script type="text/javascript">
      var mytxt=document.getElementById("txt");
    //定义"改变颜色"的函数
    function changecolor(){
        mytxt.style.color="red";
    }
    
    //定义"改变宽高"的函数
    function changewh(){
        mytxt.style.width="500px";
        mytxt.style.height="500px";
    }
    
    //定义"隐藏内容"的函数
    function hide(){
        mytxt.style.display="none";
    }
    
    //定义"显示内容"的函数
    function display(){
        mytxt.style.display="block";
    }
    
    //定义"取消设置"的函数
    /*function reset(){
        var message=confirm("reset?");
        if (message==true)
        {
            mytxt.removeAttribute("style")
        }
    
    }*/
    
    function recover(){
            var msg=confirm("是否取消所有设置?");
            if(msg==true){
                mytxt.removeAttribute("style");
            }
        }
    
      </script>
    </body>
    </html>
  • 相关阅读:
    POJ 1328 Radar Installation
    POJ 1700 Crossing River
    POJ 1700 Crossing River
    poj 3253 Fence Repair (贪心,优先队列)
    poj 3253 Fence Repair (贪心,优先队列)
    poj 3069 Saruman's Army(贪心)
    poj 3069 Saruman's Army(贪心)
    Redis 笔记与总结2 String 类型和 Hash 类型
    数据分析方法有哪些_数据分析方法
    数据分析方法有哪些_数据分析方法
  • 原文地址:https://www.cnblogs.com/lijie33402/p/4381037.html
Copyright © 2011-2022 走看看