                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript入门篇

分享自己代码

<!DOCTYPE HTML>

<html>

<head>

<title>javascript</title>

body{font-size:12px;}

#txt{

height:400px;

width:600px;

border:#333 solid 1px;

padding:5px;}

line-height:18px;

text-indent:2em;}

</style>

</head>

<body>

<h2 id="con">JavaScript课程</H2>

<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>

<p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>

<p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>

<p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>

</div>

<form>

</form>

//定义"改变颜色"的函数

function chco1(){

var shuru;

shuru=prompt("请输入十六进制颜色","#f00");

var chco=document.getElementById("con");

chco.style.color=shuru;

}

//定义"改变宽高"的函数

function chkg(){

var kuan=prompt("请输入文本框的宽","300px");

var gao=prompt("请输入文本框的高","400px");

var chkg=document.getElementById("txt");

chkg.style.width=kuan;

chkg.style.hieght=gao;

}

//定义"隐藏内容"的函数

function chyc(){

var yulai=document.getElementById("txt").style.display;

if(yulai=="none"){

alert("页面已经是隐藏状态！！！！！！！！！");}

else{

yc=document.getElementById("txt");

yc.style.display="none";}

}

//定义"显示内容"的函数

function chxs(){

var yulai=document.getElementById("txt").style.display;

if(yulai=="block"){

alert("页面已经是显示状态！！！！！！！！！");}

else{

yc=document.getElementById("txt");

yc.style.display="block";}

}

//定义"取消设置"的函数

function chqx(){

var hd= confirm("确定要将页面恢复默认布局？");

if(hd==true){

var qx1=document.getElementById("txt");

qx1.removeAttribute('style');

var qx=document.getElementById("con");

qx.removeAttribute('style');

}

</script>

</body>

</html>

dashen0

2016-10-28

源自：JavaScript入门篇 4-1

关注问题我要回答

965

操作

收起

1 回答

另一只羊
2016-10-28

<!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;
    width: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="changeHeight()">
    <input type="button" value="隐藏内容" onclick="hide()">
    <input type="button" value="显示内容" onclick="display()">
    <input type="button" value="取消设置" onclick="modify()">
  </form>
  <script type="text/javascript">
    var a = document.getElementById("txt");
    var b = document.getElementById("con");
    //定义"改变颜色"的函数
    function changeColor() {
      var atr;
      atr=prompt("请输入十六进制颜色","#f00");
      b.style.color=atr;
    }

    //定义"改变宽高"的函数
    function changeHeight() {
      var kuan=prompt("请输入文本框的宽","300px");
      var gao=prompt("请输入文本框的高","400px");
      a.style.width=kuan;
      a.style.hieght=gao;
    }

    //定义"隐藏内容"的函数
    function hide(){
      var now=document.getElementById("txt").style.display;
      if(now=="none"){
        alert("页面已隐藏");
      }else{
        a.style.display="none";
      }
    }

    //定义"显示内容"的函数
    function display(){
      var now=document.getElementById("txt").style.display;
      if(now=="block"){
        alert("页面已显示");
      }else{
        a.style.display="block";
      }
    }

    //定义"取消设置"的函数
    function modify(){
      var mymessage=confirm("是否取消设置");
      if(mymessage==true){
        a.removeAttribute('style');
        b.removeAttribute('style');
      }
    }
</script>
</body>
</html>