一、条件结构
1.1 JS条件结构基本认识
var a = 2;
if (a > 3) { //每次选择一个分支的语句执行,条件结构
alert('这个数是大于3的');
} else {
alert('这个数不大于3');
}
1.2 真假条件
计算机语言中,0为false(假),1为true(真)。
逻辑运算符有:||(或)、&&(和)、!(非)。
例:
var a=5;
var b=0;
if(!b){ //每次选择一个分支的语句执行,条件结构
alert('真的,这个数是大于3的');
}
else{
alert('假的,这个数不大于3');
}
1.3 双重条件
var sex = '女';
var clothes = '短裙';
if (sex == '女') {
if (clothes == '短裙') {
alert('美女,你可以免费游玩乐满地一天!');
}
} else {
alert('对不起,你去买票吧!');
}
1.4 多条件分支(1)
成绩查询时常用。
var a=99;
if(a>=0 && a<60){
//多条件分支
alert('你不及格');
}
else if(a>=60 && a<70){
alert('你成绩中等');
}
else if(a>=70 && a<80){
alert('你成绩良好');
}
else if(a>=80 && a<=100){
alert('你成绩优秀');
}
else{
alert('请输入0-100的数字');
}
1.5 多条件分支(2)
现实日期获取:new Date() ,识别星期几:getDay() 。
var a=new Date();
var oday=a.getDay();
switch(oday){
case 0:
alert('今天是星期天');
break;
case 1:
alert('今天是星期一');
break;
case 3:
alert('今天是星期三');
break;
}
二、循环结构
2.1 循环结构认识
var i=0;
while(i<=5){ //循环6次
alert(i);
i++;
}
或者也可以写成:
for(var i=0;i<5;i++){ //循环5次
console.log(i);
}
其中i++表示 i+1, 与i=i+1相同。
2.2 利用循环结构填涂背景颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.οnlοad=function(){
var aLi=document.getElementsByTagName('li'); //得到的aLi是一个存放li节点的数组
for(var i=0;i<aLi.length;i++){
if(i%2==0){ //可以把2整除就是偶数
aLi[i].style.background='red';
}
else{
aLi[i].style.background='green';
}
}
}
</script>
</head>
<body>
<ul>
<li id="news"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
三、 求余数的应用
把80秒转成 xx分 xx秒的形式
var oMinute=parseInt(80/60);
var oSecond=80%60;
alert(oMinute+"分"+oSecond+"秒");
把8787 转成 xx时xx分xx秒
var a=3700;
var oS=a%3600;
var oH=parseInt(a/3600); //时
var oM=parseInt(oS/60); //分
var oSs=oS%60; //秒
console.log(oH+'时'+oM+'分'+oSs+'秒');
console.log() 为在浏览器控制台上显示。
四、强制类型转换
parseInt:强制转换数据类型为整型数字。
功能:1、强制的将字符串转成数字。
2、提取数字开头的数字。
3、转成数字类型,并且取整。
parseFloat 则为强制转换数据类型为浮点数字(小数),功能类似。
var a='55';
var b=parseInt(a); //1、强制的将字符串转成数字类型
var c='46aa'; //2、提取数字开头的数字
var d=parseInt(c);
var e='69.8';
var f=parseInt(e); //3、转成数字类型,并且取整数部分
var g=parseFloat(e);
五、制作显示隐藏框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>隐藏显示框的制作</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background: #d8d8d8;
display: none;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oBtn=document.getElementById('btn');
var oBox=document.getElementById('box');
oBtn.οnclick=function(){
if(oBox.style.display=='block'){
oBox.style.display='none';
}
else{
oBox.style.display='block';
}
}
}
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="按钮" />
<div id="box">
</div>
</body>
</html>
六、函数
函数为实现某个功能的代码块。
function show() :有名函数【无参函数】
function() : 无名函数【无参函数】
自定义函数: 自己写的、定义的函数。
系统函数: 如typeof (a)【有参函数】
七、数据求和
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" name="tex1" id="tex1" value="" />
<input type="text" name="tex2" id="tex2" value="" />
<input type="button" name="btn" id="btn" value="相加" />
</body>
<script type="text/javascript">
var oTex1=document.getElementById('tex1');
var oTex2=document.getElementById('tex2');
var oBtn=document.getElementById('btn');
oBtn.οnclick=function(){
if(isNaN(parseInt(oTex1.value))){
alert('第一个数字您输入错误了,请从新填写');
}
else if(isNaN(parseInt(oTex2.value))){
alert('第二个数字您输入错误了,请从新填写');
}
else{
alert(parseInt(oTex1.value)+parseInt(oTex2.value));
}
}
</script>
</html>