1.4 JS第二天日常

最新推荐文章于 2024-06-10 22:52:06 发布

cmseric

最新推荐文章于 2024-06-10 22:52:06 发布

阅读量221

点赞数 1

文章标签：结构 javascript

本文链接：https://blog.csdn.net/baidu_33352521/article/details/54023315

版权

一、条件结构

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 双重条件

1.4 多条件分支（1）

成绩查询时常用。

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>

cmseric

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
1.4 JS第二天日常

一、条件结构1.1 JS条件结构基本认识var a = 2;if (a > 3) { //每次选择一个分支的语句执行，条件结构alert('这个数是大于3的');} else {alert('这个数不大于3');} 1.2 真假条件计算机语言中，0为false（假），1为true（真）。逻辑运算符有：||（或）、&&（和）、！（非）。例：
复制链接

扫一扫