<!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>
添加回答
举报
0/150
提交
取消