<!--最近需要用到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目录下，这部分很基础，也有些注释在里面我就啥都不说了。至于目录结构，一般有点基础的都会，我就不多说了。
时间： 2024-10-19 23:25:55