原文链接:http://baiyuming.top/2016/06/07/JavaScript%E5%AD%A6%E4%B9%A01/
JavaScript 案例1
鼠标方上显示提示信息,鼠标移开提示信息消失
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初探JavaScript</title>
<style>
#div1{
background: red;
width: 200px;
height: 20px;
display: none;
}
</style>
</head>
<body>
<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block'"
onmouseout="document.getElementById('div1').style.display='none'"
/>
<div id="div1">
为了您的信息安全。。。。
</div>
</body>
</html>
其中:
1、js 主要是给网页添加交互
2、事件 用户的操作
onclick 、 onmouseover 、 onmouseout
3、设置样式
οnmοuseοver=”document.getElementById(‘div1’).style.display=’block’”
4、getElementById 根据id 获取元素
JavaScript 案例2
鼠标放上div 变大 , 颜色改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初探JavaScript</title>
<style>
#div1{
background: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="div1" onmouseover="toGreen()">
</div>
<script>
function toGreen() {
var oDiv = document.getElementById('div1');
oDiv.style.width='300px';
oDiv.style.height = '300px';
oDiv.style.background = 'green';
}
</script>
</body>
</html>
其中 应用了函数的概念
JavaScript 案例3
点击按钮 更换网页皮肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初探JavaScript</title>
<link id="link" rel="stylesheet" href="css1.css">
</head>
<body>
<input type="button" value="Skin1" onclick="changeSkin1()">
<input type="button" value="Skin2" onclick="changeSkin2()">
<script>
function changeSkin1() {
var oLink = document.getElementById('link');
oLink.href = 'css1.css';
}
function changeSkin2() {
var oLink = document.getElementById('link');
oLink.href = 'css2.css';
}
</script>
</body>
</html>