javascript学习（一）

来源：互联网发布：linux挂载软盘编辑：程序博客网时间：2024/05/16 09:16

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

html代码：

<span style="font-size:18px;color:#cc33cc;"><body>  <div id="txt">      <h1>学习javascript</h1>        </div>  <form>  <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->    <input type="button" value="改变颜色" onclick="ChangeColor()">      <input type="button" value="改变宽高" onclick="ChangeWH()">    <input type="button" value="隐藏内容" onclick="YC()">    <input type="button" value="显示内容" onclick="Show()">    <input type="button" value="取消设置" onclick="Reset()">  </form></body></span>

css代码：

<span style="font-size:18px;color:#cc33cc;"><span style="color:#cc33cc;"><style type="text/css">body{font-size:12px;}#txt{    height:400px;    width:600px;border:#333 solid 1px;padding:5px;}</style></span></span>

javascript代码：

<span style="font-size:18px;color:#cc33cc;"><span style="color:#cc33cc;"><script type="text/javascript">//定义"改变颜色"的函数function ChangeColor(){    var mychar = document.getElementById("txt");    mychar.style.color = "red";    mychar.style.backgroundColor = "#ccc";}//定义"改变宽高"的函数function ChangeWH(){    var mychar = document.getElementById("txt");    mychar.style.width = "400px";    mychar.style.height = "200px";}//定义"隐藏内容"的函数function YC(){    var mychar = document.getElementById("txt");    mychar.style.display = "none";}//定义"显示内容"的函数function Show(){    var mychar = document.getElementById("txt");    if(mychar.style.display = "none"){        mychar.style.display = "block";    }    else{        mychar.style.display = "none";    }}//定义"取消设置"的函数function Reset(){    var myDiv2=document.getElementById("txt");    var myDiv=confirm("确定要取消设置吗？");    if(myDiv)    {        myDiv2.style.color="#000";        myDiv2.style.backgroundColor="#fff";        myDiv2.style.width="600px";        myDiv2.style.height="400px";        myDiv2.style.display="block";    }}  </script></span></span>

效果图：

点击改变颜色：

改变宽高：

隐藏内容：

0 0