<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
#text {
width: 600px;
height: 400px;
border: #333 solid 1px;
margin-left: 450px
}
#con {
text-align: center;
color: red
}
#but {
width: 600px;
height: 30px;
border: #333 solid 1px;
margin-left: 450px
}
</style>
<script type="text/javascript">
//改變顏色
function changeColor() {
document.getElementById("text").style.color = "red";
}
//改變大小
function changeSmallOrLittle() {
document.getElementById("text").style.width = "400px";
document.getElementById("text").style.height = "250px";
document.getElementById("but").style.width = "400px";
}
//隱藏內容
function hide() {
document.getElementById("text").style.display = "none";
}
//顯示內容
function display() {
document.getElementById("text").style.display = "block";
}
//恢復界面
function rep() {
var conf = confirm("你要恢復設定嗎？")
var execute = prompt("請輸入立即執行","立即執行");
if(execute=="立即執行"){
document.getElementById("text").removeAttribute("style");
}
if(execute==null){
alert("請輸入立即執行");
}
}
</script>
</head>
<body>
<h2 id="con">JavaScript課程</H2>
<div id="text">
<h5>JavaScript為網頁添加動態效果并實作與用戶互動的功能。</h5>
<p>1. JavaScript入門篇，讓不懂JS的你，快速了解JS。</p>
<p>2. JavaScript進階篇，讓你掌握JS的基礎語法、函式、陣列、事件、內置物件、BOM瀏覽器、DOM操作。</p>
<p>3.
學完以上兩門基礎課后，在深入學習JavaScript的變數作用域、事件、物件、運動、cookie、正則運算式、ajax等課程。</p>
</div>
<div id="but">
<button id="changeColor" onclick="changeColor()">改變顏色</button>
<button id="changeSmallOrLittle" onclick="changeSmallOrLittle()">改變大小</button>
<button id="hide" onclick="hide()">隱藏內容</button>
<button id="display" onclick="display()">顯示內容</button>
<button id="rep" onclick="rep()">恢復界面</button>
</div>
</body>
</html>
uj5u.com熱心網友回復：
uj5u.com熱心網友回復：
謝謝，常來看看uj5u.com熱心網友回復：
學習學習學習uj5u.com熱心網友回復：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/106719.html
標籤：JavaScript