Case: Using CSS and html to make a QQ landing page.
<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>
Flow control statements
<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 statement: easy call function
with (object) {
direct writing method object}
with(document){
var i = 0;
do{
write("helloword");
write("<br>");
i++;
}while(i<10);
}
js function defined in
<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>
Corresponding to the number of days each month inquiry
add a function
<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>
