<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
body{
text-align:center;
font:12px Normal,"Microsoft Yahei";
text-indent;2em;
background:#ccc;
}
#container {
width:900px;
min-height:500px;
height:auto;
margin:0 auto;
padding:10px 20px;
text-align:left;
background-color:#fff;
border:1px solid #b1b1b1;
display:block
}
#txt {
width:500px;
border:1px solid #ccc;
padding:15px;
margin:10px 0 10px;
}
.show {
display:block;
}
.hide {
display:none;
}
.btn {
width:50px;
height:30px;
border:1px dotted #b1b1b1;
display:block;
}
.default {font-size:10px; color:black;}
.one {font-size:14px; color:green;}
.two {font-size:20px; color:red;}
</style>
</head>
<body>
<div id="container">
<h2>综合使用各类Javascript命令</h2>
<script type="text/javascript">
var txt = document.getElementById("txt");
function show() { //定义显示内容
txt.style.display="block";
}
function hide() { //定义隐藏内容
txt.style.display="none";
}
function reset() { //恢复默认
if(confirm("确定取消设置?")){
txt.removeAttribute("style");
}
}
function changeColor() { //改变颜色
txt.style.color="red";
}
function changeWidth() { //改变宽度
txt.style.width="500px";
}
function changeHeight() { //改变高度
txt.style.height="500px";
}
function changeBgcolor() { //改变背景颜色
txt.style.background-color="red";
}
</script>
<input type="reset" value="reset" onclick="Reset()"/>
<input type="button" value="change color" onclick="changeColor()"/>
<input type="button" value="change width" onclick="changeWidth()"/>
<input type="button" value="change height" onclick="changeHeight()"/>
<input type="button" value="change background color" onclick="changeBgcolor()" />
<input type="button" value="click to show" onclick="show()" />
<input type="button" value="click to hide" onclick="hide()" />
<p>点击按钮改变颜色,宽、高,背景颜色,并提供选项恢复默认颜色。</p>
<div id="txt">
<h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
<p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p>
<p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
<p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
</div>
</div>
</body>
</html>
Mr_atom
相关分类