属性操作读写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
属性操作
属性
在标签中设置属性 方法: 属性名="属性值"
在css中设置属性 方法: 属性名:属性值;
-->
<input type="text" value="" id="btn1">
<input type="button" value="走起" id="btn2">
<br>
<img src="img/2.jpg" width="200px" height="300px" alt="卡通" id="img1">
</body>
</html>
<script type="text/javascript">
var a = 1;
var b = "hello";
alert(1+a);
alert(b+" world");
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oImg = document.getElementById("img1");
oBtn2.onclick = function(){
//alert(oBtn1.value);
//oImg.src = "img/1.jpg";
oImg.src = oBtn1.value;
//oBtn1.value = "五五开";
}
</script>
效果
alert(1+a);
alert(b+" world");
oImg.src = oBtn1.value;
字符串拼接以及if语句
这里写代码片<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" value="" id="btn1">
<input type="button" value="走起" id="btn2">
<br>
<img src="img/2.jpg" width="200px" height="300px" alt="卡通" id="img1">
</body>
</html>
<script type="text/javascript">
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oImg = document.getElementById("img1");
var a = 1;
oBtn2.onclick = function(){
if(a > 3)
a = 1;
oImg.src = "img/"+a+".jpg";
a++;
}
</script>
因为img文件夹下只有三个图片,所以用if判断,当a>3的时候将其重置为1