一、亲自试一试

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  <button type="button" id="button" onclick="document.getElementById(\'button\').innerHTML=Date()">click me</button>
  </body>
</html>

 

二、展示 JavaScript 能力的部分实例

 

 

 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>Javascript可用来做什么？</h1>
    <p id = \'demo1\'>1.我可以被改变</p>
    <p id = \'demo2\'>2.我可以被改变大小</p>
    <p id = \'demo3\'>3.我可以被隐藏</p>
    <button type="button" name="button" onclick="document.getElementById(\'demo1\').innerHTML= \'1.JavaScript 能够改变 HTML 内容1\'">CLICK ME 单引号</button>
    <h5>2.JavaScript 能够改变 HTML 属性</h5>
    <button type="button" name="button" onclick="document.getElementById(\'image\').src = \'eg_bulbon.gif\'">开灯</button>
    <img src="eg_bulboff.gif" alt="灯" id=\'image\' style="text-align:center;"/>
    <button type="button" name="button" onclick="document.getElementById(\'image\').src= \'eg_bulboff.gif\'">关灯</button>
    <h5>3.JavaScript 能够改变HTML样式 (CSS)</h5>
    <button type="button" name="button" onclick="document.getElementById(\'demo2\').style.fontSize=\'100px\'">click me</button>
    <h5>4.JavaScript 能够隐藏 HTML 元素</h5>
    <button type="button" name="button" onclick="document.getElementById(\'demo3\').style.display=\'none\'">CLICK ME</button>
    <h5>5.JavaScript 能够显示 HTML 元素</h5>
    <button type="button" name="button" onclick="document.getElementById(\'demo3\').style.display=\'block\'">CLICK ME</button>
  </body>
</html>

 

版权声明：本文为n0page404原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/n0page404/articles/11057466.html