<!--最近需要用到js相关的知识 就把在W3cSchool 下学到的东西做个笔记，方便以后再看 -->
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet"/> </head> <body> <h4 id="haha">gai bian zhe li </h4> <button type="button" onclick="btnClick()">Block button</button> <p>-----------------------------------------------------------------------------------------------</p> <h4>js 改变图片</h4> <img id="Image" onclick="changeImage()" src="img/eg_bulboff.gif" /> <p>点击灯泡，点亮或熄灭灯</p> <p>--------------------------------------------------------------------------------------</p> <h4>验证输入</h4> <input id="input" type="text" /> <h5 id="show" style="color: #ff0000;">jian ce</h5> <button type="button" onclick="inputDetection()">输入验证</button> <p>------------------------------------------------------------------</p> <h4>js对象</h4> <div id="lis"> 显示对象属性值 </div> <button type="button" onclick="list()">显示对象属性值</button> <p>------------------------------------------------------------------</p> <h4>访问对象的方法</h4> <input id="UPC" type="text" /> <p id="upcs">展示</p> <button type="button" onclick="upc()">转换成大写</button> <p>------------------------------------------------------------------</p> <h4>调用带参数的函数</h4> <button type="button" onclick="daican('大雷' ,'16')">传递参数</button> </body> <script> //调用带参数的函数 function daican(name , age){ alert("name = "+ name +", age = " + age); } //以访问String对象的toUpperCase 方法 将文本转换成大写 function upc(){ upcs = document.getElementById("upcs"); var up = document.getElementById("UPC").value; up = up.toUpperCase(); upcs.innerHTML=up; } //js对象 function list(){ li = document.getElementById("lis"); var list = { //list对象拥有4个属性 a1-a4 a1 : "name1", a2 : "name2", a3 : "name3", a4 : "name4", } li.innerHTML=list.a1;//对象属性有两种寻址方式 li.innerHTML=list["a4"];//第二种 } //改变文字内容 function btnClick(){ btn = document.getElementById("haha"); btn.innerHTML="shen me gui"; } //改变图片地址 function changeImage(){ imgbg = document.getElementById("Image"); if(imgbg.src.match("bulbon")){ imgbg.src="img/eg_bulboff.gif"; }else{ imgbg.src="img/eg_bulbon.gif"; } } //检测输入 function inputDetection(){ show = document.getElementById("show"); var input = document.getElementById("input").value; if(input==""||isNaN(input)){//检测是否 不是数字 is not a number 如果是数字返回true show.innerHTML="输入内容不是数字"; }else{ show.innerText="";//两个inner 方法功能在这里似乎是一样的，区别在哪里呢？ } } </script> </html>
这是上面用到的图片，在img目录下，这部分很基础，也有些注释在里面我就啥都不说了。至于目录结构，一般有点基础的都会，我就不多说了。