JavaScript(入門):
https://blog.csdn.net/Veer_c/article/details/103894517
JavaScript實用案例與常見問題(一):
https://blog.csdn.net/Veer_c/article/details/103894959
JavaScript實用案例及常見問題(二):
https://blog.csdn.net/Veer_c/article/details/103895166
案例:利用CSS和html做出一個QQ登陸的頁面。
<style type="text/css">
#div1{
width:300px;
height:300px;
border:1px solid #F00;
margin-left:500px;
margin-top:200px;
background-image:url(05.%E7%B4%A0%E6%9D%90/1.jpg);
background-repeat:no-repeat;
background-position:top center}
#userDiv{
margin-left:50px;
margin-top:100px;
}
#passwordDiv{
margin-left:50px;
margin-top:10px;
}
#btnDiv{
margin-left:100px;
margin-top:10px;
}
#inputUser{
background-image:url(05.%E7%B4%A0%E6%9D%90/head.png);
background-repeat:no-repeat;
background-position:center left;
padding-left:30px;}
#inputpassword{
background-image:url(05.%E7%B4%A0%E6%9D%90/key.jpg);
background-repeat:no-repeat;
background-position:center left;
padding-left:30px;}
</style>
</head>
<body>
<div id="div1">
<form>
<div id="userDiv">用戶名:<input type="text" id="inputUser" /></div>
<div id="passwordDiv">密 碼:<input type="password" id="inputpassword" /></div>
<div id="btnDiv"><input type="button" value="登陸"/><input type="button" v````
lue="註冊"/></div>
</form>
</div>
</body>
流程控制語句
<script type="text/javascript">
/*
if語句
if(表達式){
語句
}else{
語句
}
條件可以是:
布爾值:true:成立 ; false:不成立
number:非0:成立; 0: 不成立
string: 非空字符串: 成立 ; 空字符串: 不成立
object: 非null: 成立; null:不成立
swtich語句
swtich(變量){
case 選項1:
語句;
break; 如果不break,就會繼續下面選項的語句
case 選項2::
語句;
break;
default:
默認;
}
注意:在js中的switvch語句中的case選項的值:
1.可以選擇常量,String類型或者number類型
2.case選項中的值還可以是變量
3.在java中case選項中的值只能是常量不能是變量
4.case選項還可以是表達式
for語句:
for(初始化語句;條件判斷語句;流程控制語句){
循環體語句
}
需求:頁面上打印十次helloworld
需求:對1-100進行求和
while語句
初始化語句
while(條件判斷語句){
循環體語句;
條件控制語句;
}
執行流程:
需求:在頁面上打印十次helloworld;
do-while語句
初始化語句;
do{
循環體語句;
條件控制語句;
}while(判斷條件語句)
需求:在頁面上打印十次helloworld;
*/
/*
if(null){
alert("條件成立");
}else{
alert("條件不成立");
}*/
/*
var choice = "b";
var b = "b";
switch(choice){
case "a":
alert("您選擇了a");
break;
case b:
alert("您選擇了b");
break;
case "c":
alert("您選擇了c");
break;
default:
alert("您的選項不存在");
break;
}*/
/*
var age = 19;
switch(true){
case age>=18:
alert("你是成年人");
break;
case age<18:
alert("未成年人禁止入內");
break;
}*/
//需求:頁面上打印十次helloworld
/*
for(var i=0;i<10;i++){
document.write("helloword");
document.write("<br>");
}
//需求:對1-100進行求和
var sum = 0;
for(var i = 1;i<=100;i++){
sum+=i;
}
document.write(sum);*/
/*
var i = 0;
while(i<10){
document.write("helloword");
document.write("<br>");
i++;
}*/
var i = 0;
do{
document.write("helloword");
document.write("<br>");
i++;
}while(i<10);
</script>
</head>
<body>
</body>
with語句:方便函數的調用
with(對象){
直接寫對象的方法}
with(document){
var i = 0;
do{
write("helloword");
write("<br>");
i++;
}while(i<10);
}
js中的函數中的定義
<script type="text/javascript">
/*
js中的函數定義:
function 函數名(形式參數列表){函數體}
函數定義中需要注意的問題:
1.在js中函數的定義的參數列表不需要寫var
2.js中的函數可以有返回值,無需聲明返回值類型,只需要通過return這個關鍵字返回結果即可
3.js中沒有方法重載的概念,如果方法名相同,後面的方法就會覆蓋前面的方法
4.在我們js中的每一個函數中都存在一個arguments數組,這個數組就是用來接受我們的所有的實際參數的,接收完畢之後
給我們的函數的形式參數從左到右依次賦值
js函數的調用:
1.如何調用:函數名稱(實際參數)
2.實際參數個數<形式參數個數 NaN
3.實際參數個數>形式參數個數 會拿着你的所有的實際參數給你的形式參數從左到右依次賦值,後面多餘的形式參數直接捨棄 */
//定義一個函數,a和b的加法
function add(a,b){
alert(arguments.length);
var res = a+b;
return res;
}
//定義一個3個數相加的add方法
/*
function add(a,b,c){
var res= a+b+c;//1+2+c;
return res;
}*/
var sum = add(2,2,3);
document.write(sum);
</script>
查詢每個月份對應的天數
添加一個函數
<script type="text/javascript">
//當我的按鈕的單擊事件被觸發以後需要執行的操作
function checkMonth(){
//獲取單行輸入域內的用戶輸入的月份值
var month = document.getElementById("month").value;
//使用if語句做判斷,給出相應的提示
/*
1,3,5,7,8,10,12 大月 31天
4,,6,9,11 小月 30天
2 小小月 28天 */
if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
alert("該月有31天");
}else if(month==4||month==6||month==9||month==11){
alert("該月有30天");
}else if(month==2){
alert("該月有28天");
}else{
alert("星球上沒有這個月份");
}
}
</script>
</head>
<body>
請輸入你需要查詢的月份:<input type="text" id="month"/>
<!--在這裏需要給我的button標籤添加一個單擊事件-->
<input type="button" value="查詢天數" onclick="checkMonth()" />
</body>
JavaScript(入門):
https://blog.csdn.net/Veer_c/article/details/103894517
JavaScript實用案例與常見問題(一):
https://blog.csdn.net/Veer_c/article/details/103894959
JavaScript實用案例及常見問題(二):
https://blog.csdn.net/Veer_c/article/details/103895166