W3C JavaScript教程学习心得

一、亲自试一试

<!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>

 

posted @ 2019-06-20 11:00  n0page404  阅读(152)  评论(0)    收藏  举报