-
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>js入門編程挑戰2</title>
<style type="text/css">
body{font-size:12px;}
#txt{
? ? height:400px;
? ? width:600px;
border:#333 solid 1px;
padding:5px;
}
p{
line-height:18px;
text-indent:2em;}
</style>
</head>
<body>
? <h2 id="con">JavaScript課程</H2>
? <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>
? <form>
? <!--當點擊相應按鈕，執行相應操作，為按鈕添加相應事件-->
? ? <input type="button" value="改變顏色" onclick="change_color()">??
? ? <input type="button" value="改變寬高" onclick="change_wight()">
? ? <input type="button" value="隱藏內容" onclick="display_off()">
? ? <input type="button" value="顯示內容" onclick="display_on()">
? ? <input type="button" value="取消設置" onclick="cancle_op()">
? </form>
? <script type="text/javascript">
//定義"改變顏色"的函數
var comment=document.getElementById("txt")
// 保存原始樣式
var originalStyles = {
? ? color: comment.style.color,
? ? backgroundColor: comment.style.backgroundColor,
? ? width: comment.style.width,
? ? height: comment.style.height,
? ? display: comment.style.display
};
function change_color() {
? ? comment.style.color="red";
? ? comment.style.backgroundColor ="blue";
}
//定義"改變寬高"的函數
function change_wight() {
? ? comment.style.width="300px";
? ? comment.style.height="200px";
}
//定義"隱藏內容"的函數
function display_off() {
? ? comment.style.display="none";
}
//定義"顯示內容"的函數
function display_on() {
? ? comment.style.display="block";
}
//定義"取消設置"的函數
function cancle_op() {
? ? var is_cancel=confirm("是否取消設置？");
? ? if(is_cancel)
? ? {? ?
? ? ? ? comment.style.color=originalStyles.color;
? ? ? ? comment.style.backgroundColor =originalStyles.backgroundColor;
? ? ? ? comment.style.width=originalStyles.width;
? ? ? ? comment.style.height=originalStyles.height;
? ? ? ? comment.style.display=originalStyles.display;
? ? }
}
? </script>
</body>
</html>
查看全部 -
在 JavaScript 中，可以使用?var、let?和?const?關鍵字來聲明變量。
var：ES5 引入的變量聲明方式，具有函數作用域。
let：ES6 引入的變量聲明方式，具有塊級作用域。
const：ES6 引入的常量聲明方式，具有塊級作用域，且值不可變。
查看全部 -
Object.style.property=new style;
Object.style.display="none"/"block";
Object.className="new name";
例如：con.style.backgroundColor="red";
backgroundColor
height
width
color
font
fontFamily
fontSize
查看全部 -
Object.innerHTML 用于獲取? 或? 替換HTML元素的內容
查看全部 -
window.open('href','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
mywin.close();關掉窗口
查看全部 -
alert()彈出消息提示框
confirm()彈出消息對話框，包括一個確定按鈕，一個取消按鈕
查看全部 -
document.write(mystr+mychar+"sssss"+"<br>"+" "+"ssss");
變量不用加“”，輸出固定值加“”
查看全部 -
if(判斷條件){
}
else if{
}
else{
}
查看全部 -
<script src="script.js"></script>引用外部JS文件
查看全部 -
document.geiElementById("id").style.color="blue"; 表示設置某個id顏色為藍色
查看全部 -
代碼好難
查看全部 -
function openWindow(){
?????var queren=confirm("確定打開嗎？");
?????if(queren==true){
????? ???var myweb=prompt("請輸入網址","http://www.xianlaiwan.cn");
?????????if(myweb!=null){
?????????????window.open(myweb,"_blank",'width=400,heigth=500,menubar=no,toolbar=no')
?????????}
?????????else{
???????? ????alert("再見");
?????????}
??????}?
}
查看全部 -
不是一定要獲取到id名，直接用也行，但document.getElementById()這個方法得記得，這個作業涉及前面未學過的方法--removeAttribute()，對于return(flase)和return(trun)一直不太理解。
查看全部 -
fun是函數
查看全部 -
window.open('','','') 打開窗口
查看全部 -
var a = prompt() 文本框提示框
查看全部 -
var a=confirm() 消息對話框
查看全部 -
alert() 輸出提示框
document.write() 輸出流
查看全部 -
第一種:輸出內容用""括起，直接輸出""號內的內容。
第二種:通過變量，輸出內容
第三種:輸出多項內容，內容之間用+號連接。
第四種:輸出HTML標簽，并起作用，標簽使用""括起來。
查看全部 -
document.write("hello");查看全部
-
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函數調用</title>
? ?<script type="text/javascript">
? ? ? function contxt() //定義函數
? ? ? {
? ? ? ? ?alert("哈哈，調用函數了!");
? ? ? }
? ?</script>
</head>
<body>
? ?<form>
? ? ? <input type="button"? value="點擊我" onclick=" contxt()? " />??
? ?</form>
</body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>
? ? <head>
? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=gb18030">
? ? ? ? <title>插入js代碼</title>
? ? ? ? <script type="text/javascript">
? ? ? ? document.write("開啟JS之旅!");
? ? </script>
? ? </head>
? ? <body>
? ? </body>
</html>
查看全部 -
<!DOCTYPE HTML>
<html>?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>熱身</title>
</head>
<body>
? <p id="p1">我是第一段文字</p>
? <p id="p2">我是第二段文字</p>
??
? <script type="text/javascript">
document.write("hello");
document.getElementById("p1").style.color="blue";
? </script>
</body>
</html>
查看全部 -
getElementById是一個document對象的方法，可以通過它來獲得指定id的html元素。
例如在頁面里表單元素你可以給它設置id值，或name值來區別同種類型的不同元素，當你設置id document.getElementById("id")來得到這個元素，從而通過document.getElementById("id").value 得到元素的值。類似的方法還有document.getElementsByName("name")通過元素名稱獲得元素對象。document.getElementsByTagName("form")通過標簽名稱獲得元素。
比如 <div id="test"></div>
document.getElementById("test") 就可以獲取到這個對象了
查看全部
舉報