本节课所讲内容:
- JavaScript 新闻网站字体控制
- JavaScript图片切换
主讲教师:Head老师
一. JavaScript 新闻网站字体控制
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js 属性操作应用</title>
<script type="text/javascript" src="index.js"></script>
<style type="text/css">
.red{
color: red;
}
.yellow{
color: yellow;
}
</style>
</head>
<body>
<input type="button" id="btn1" value="-">
<input type="button" id="btn2" value="+">
<input type="button" id="btn3" value="红色">
<input type="button" id="btn4" value="黄色">
<p id="p1" style="font-size:16px">
"许多人都注意到,只要天气好,一些跳广场舞的地方就热闹欢
腾;而遇到雾霾天,广场舞的声音立即就变小了。我也听说,
咱们在做的一些部长们,出外散步时也习惯先要看看雾霾指数。
4月26号,国务院常务部长们在会议上,李克强总理一连引用两个
身边的实例说,“雾霾的确已成为事关每个人的民生通点。"
</p>
</body>
</html>
index,js
window.onload=function(){
var oBtn1 = document.getElementById("btn1");
var oBtn2 = document.getElementById("btn2");
var oBtn3 = document.getElementById("btn3");
var oBtn4 = document.getElementById("btn4");
var oP = document.getElementById("p1");
var num = 32;
//字体的缩小、放大
oBtn1.onclick=function(){
//alert(1);
num -=2;
oP.style.fontSize=num+"px";
};
oBtn2.onclick=function(){
num+=2;
oP.style.fontSize=num+"px";
};
//颜色变的换
oBtn3.onclick=function(){
oP.className="red";
};
oBtn4.onclick=function(){
oP.className="yellow";
}
}
二. JavaScript图片切换
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片切换</title>
<script type="text/javascript" src="./index.js"></script>
</head>
<body>
<input type="text" id="text1" value="格式./img/xx.png">
<input type="button" id="btn1" value="点击切换图片">
<img src="./img/3.png" alt="" id="img1">
</body>
</html>
index.js
window.onload=function(){
var oBtn = document.getElementById("btn1");
var oText = document.getElementById("text1");
var oImg = document.getElementById("img1");
oBtn.onclick=function(){
// alert(1);
oImg.src = oText.value;
}
}