2018-11-06
2018-11-06 本文已影响0人
叶叶阿姨
浏览器中的JavaScript主要包含三个要的：
ECMAScrupt:JAVAScript语法规范
BOM：浏览器对象模型(BrowserObj ectModel),把浏览器当成一个对象（window）,通过这个对象可以操作浏览器
DOM:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h3><span id="counter">5</span>秒后自动跳转到百度</h3>
<script>
var countDown = 5;
var span = document.getElementById('counter');
function delayGoto(){
countDown -= 1;
if (countDown == 0){
window.location.href = 'https://www.baidu.com';
} else {
span.textContent = countDown;
window.setTimeout(delayGoto,1000);
}
}
window.setTimeout(delayGoto,1000);
</script>
</body>
</html>
糖果动态图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>糖果动态图</title>
</head>
<body>
<div id="adv">
<img src="img/slide-1.jpg" alt="加载失败了～" width="705">
</div>
<script>
var index = 0;
var img = document.getElementsByTagName('img')[0];
window.setInterval(function(){
index += 1;
index %= 4;
img.src = "img/slide-" + (index + 1) + '.jpg';
},2000);
</script>
</body>
</html>
确定按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<button id="ok">确定</button>
<script>
var okButton = document.querySelector('#ok');
okButton.addEventListener('click',function(){
window.alert('hello,小叶子');
});
// 给okButton绑定click事件的回调函数
okButton.addEventListener('click',function(){
if(window.confirm('确定要关闭？')){
window.close();
}
});
</script>
</body>
</html>
按钮弹出对应框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>按钮</title>
<style type="text/css">
#buttons button{
width: 100px;
height: 60px;
background-color: pink;
color: #FFF8DC;
margin: 10px;
}
</style>
</head>
<body>
<div id="buttons">
<button>苹果</button>
<button>香蕉</button>
<button>草莓</button>
<button>西瓜</button>
<button>蓝莓</button>
<button>榴莲</button>
<button>葡萄</button>
<button>橘子</button>
<button>芒果</button>
<button>香瓜</button>
</div>
<script type="text/javascript">
var buttons = document.querySelectorAll('#buttons>button');
for(var i = 0; i < buttons.length; i += 1) {
buttons[i].addEventListener('click',function(evt){
var button = evt.target || evt.srcElement;
window.alert('你选中了'+ evt.target.textContent);
});
}
</script>
</body>
</html>
