JavaScript练习(Winter vacation plan 2)
switch 与 if都可以实现分支,
1.当应用场景具有范围或条件是用if elseif else
2.当条件为具体某个特殊值则使用switch
1.(小练习: 实现图片的手动翻页)
主要是运用JavaScript中变量的加减运算 1.先准备自己喜欢的n张图片 2.开始编写code先是HTML部分:
<style type="text/css">
img{
width: 500px;
height: 300px;
margin: auto;
margin-left: 450px;
}
span{
border:1px aliceblue solid;
background-color: #FF0000;
color: black;
border-radius: 5px;
font-size: 20px;
/* margin: auto; */
/* margin-left: 100px; */
}
#prev{
margin-left: 640px;
}
#next{
margin-left: 10px;
}
</style>
</head>
<body>
<div id="wrap">
<div class="title">
<div class="tit-con">
<span id="prev">上一张</span>
<span id="next">下一张</span>
</div>
</div>
<div class="container01">
<img src="../img/图片切换01.jpg" id="img01" alt="">
</div>
</div>
</body>
<script src="./JS练习(图片切换).js" type="text/javascript" charset="utf-8"></script>
一般我都是把script放在body后面.
确保script不会先被执行,从而报错:Uncaught TypeError: Cannot set property ‘onclick’ of null.
再来是JavaScript部分
//找到需要使用的对象并定义 prev next img01
var oprev = document.getElementById("prev")
var onext = document.getElementById("next")
var oimg01 =document.getElementById("img01")
//定义一个变量表示当前为第几张
var nowIndex01 = 1
alert("谢谢测试")
//给按钮绑定事件
oprev.onclick = function(){
if(nowIndex01 == 1){
alert("已经是第一张了!")
}
//找到上一张图片并切换
nowIndex01--
if(nowIndex01 <= 0){
nowIndex01 = 1
}
oimg01.src = "../img/图片切换0"+nowIndex01+".jpg" //拼接变量
// alert("prev")
}
onext.onclick = function(){
if(nowIndex01 ==5){
alert("已经是最后一张了!")
}
//找到下一张图片并切换
nowIndex01++
if(nowIndex01 >= 6){
nowIndex01 = 5
}
oimg01.src = "../img/图片切换0"+nowIndex01+".jpg"
// alert("next")
}
以下就是效果动图:
2.逻辑运算符
&& 且 必须两边同时满足结果才为true (有假为假) || 或 两边只需满足一个结果即为true (有真为真) ! 非(取反) 原来为true时 结果取反为falseconsole.log(true && true) //输出为true
console.log(true && false) //输出为false console.log("============================================")
console.log(true || true) //输出为true
console.log(true || false) //输出为true
console.log(false || false) //输出为false
console.log("============================================")
console.log(!true) //输出false
运行后为：
逻辑运算符的短路现象
&& || 判断表达式时从左往右 true && true 判断时发现第一个为true则继续执行 false && true 判断时发现第一个为false则已知道结果为false,不再执行后面的命令,称为短路function fn1() {
console .log("fn1执行了")
return false //函数的运行结果
}
function fn2() {
console .log("fn2执行了")
return true //函数的运行结果
}
var res01 = fn1() && fn2() //仅仅执行了fn1输出false,不再执行fn2
console.log(res01)
var res02 = fn2() || fn1() //仅执行了fn2输出true,不再执行fn1
console.log(res02)
逻辑运算符短路的应用
//&& 希望传一个函数给fn3
var fn3 = function(){
alert(1)
}
fn3 && fn3() //如果 是一个function fn3转换成true 则调用后面的fn3()并执行fn3()
//&& 希望传一个函数给fn3
var fn3 = undefined
fn3 && fn3() //如果 是一个undefined fn3转换为false 则不再执行后面的fn3()=undefined,所以不会报错
//|| 输出字符串 打印长度
var str09 = prompt("请输入字符串")
// alert(str09.length)
//如果用户输入了值为true,则str09赋值给str10 或者用户没有输出为false则||后的值赋值给str10
var str10 = str09 || ""
alert(str10.length || "您将无法使用部分功能")
-
赋值运算符:
a += b ====> a = a + b a -= b ====> a = a - b a *= b ====> a = a * b a /= b ====> a = a / b a %= b ====> a = a % b //%取余 -
字符串连接符:
"字符串1"+"字符串2" "变量"+"字符串" -
运算符的优先级:
()优先级最高!! 优先执行的语句用()括起来 赋值优先级最低!! 先乘除后加减
3.流程控制(编程思路)
一个表单的练习:<form >
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputqq1">QQ号码</label>
<input type="text" name="" class="form-control" id="exampleInputqq1" placeholder="QQ" />
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<div class="form-group">
<button class="btn btn-danger col-md-offest-4" id="btn04">登录</button>
</div>
</form>
<script type="text/javascript">
//登录 :
// 1.判断格式:QQ长度 QQ号必须为数字 QQ密码为6~16位
// 2.判断用户名和密码是否正确 密码与账号相符
// 3.流程:a.用户点击登录按钮 b.开始判断正误 c.判断结果反馈给用户
var obtn04 = document.getElementById("btn04")
var oqq = document.getElementById("exampleInputqq1")
var opassword = document.getElementById("exampleInputPassword1")
var qq_ = "2638290095" //定义正确的账号密码
var password_ = "zlq.123456"
console.log(obtn04,oqq,opassword)
//按钮绑定事件
obtn04.onclick = function(){
//开始判断--先判断格式()获取用户输入的QQ和密码
var ipt_qq = oqq.value
var ipt_password = opassword.value //判断长度
if (ipt_qq.length < 5 || ipt_qq.length > 11){
alert("输入长度有误!")
return //函数的返回值 提前结束函数的代码
}
var res03 = Number(ipt_qq) // 判断类型
// if(res03 = false){
// alert("QQ输入只能为数字")
// }
if(isNaN(res03)){ //判断输出是否为NaN
alert("输入格式有误!")
return
}
if(ipt_password.length < 6 || ipt_password.length > 16){ //判断密码格式
alert("密码长度有误!")
}
var res04 = Number(ipt_password)
if(isNaN(res04)){
console.log(res04)
}else{
alert ("密码格式有误")
}
// --再将输入与正确的比对
if(ipt_qq === qq_ && ipt_password === password_){
alert("登录成功")
}else{
alert("登陆失败,请重新登录")
}
}
</script>
以下是效果图(存在着较多的瑕疵,有待改进)
步骤总结:
-
拿到了需求:
a.判断qq长度
b.判断qq是否为数字
c.判断密码长度
d.判断密码类型
e.判断账号密码是否相符 -
把需求拆分:
a.判断用户名长度:输入QQ号(input 绑定事件 定义.value )=>得到QQ号长度(定义名.length)=>以长度判断比对(if…)
b.判断QQ号是否为数字:转换(Number() 若存在非数值输出NaN)=>判断(if(isNaN= ){ })
c.判断密码长度:…
d.判断密码类型:…
e.判断账号密码是否相符:定义正确的值=>判断(if( = ){})
4.三大结构
顺序结构：if else语句
选择结构：if elseif else语句 switch语句
if elseif else 语句:
<input type="text" class="form-control" name="" id="ipt05" value="" />
<button type="button"id="btn05" class="btn btn-danger">成绩等级判断</button>
var oipt05 = document.getElementById("ipt05")
var obtn05 = document.getElementById("btn05")
obtn05.onclick = function(){
var num14 = oipt05.value
if(num14 >= 90 ){
alert("优秀")
}else if(num14 >= 80){
alert("良好")
}else if(num14 >= 70){
alert("中等")
}else if(num14 >= 60){
alert("及格")
}else{
alert("不及格")
}
console.log(num14)
}
switch 语句:
switch(状态值){
case 状态1:
code..1
break;
case 状态2:
code..2
break;
case 状态3:
code..3
break;
default:
code..4
break;
//(放在最后可省略,放在前面不可省略)
}
<input type="text" class="form-control" name="" id="ipt07" value="" />
<button type="button"id="btn07" class="btn btn-danger">成绩等级</button>
var oipt07 = document.getElementById("ipt07")
var obtn07 = document.getElementById("btn07")
obtn07.onclick = function(){
//方案一:
var num16 = oipt07.value
var onum16 =parseInt(num16 / 10)
console.log(num16,onum16)
switch(onum16){
case 10: //注意冒号: !! case 后的常量指的是常量表达式，它必须是整数类型。 不用加" "
case 9: //多个case可共享一个代码命令
alert("优秀")
break;
case 8:
alert("良好")
break;
case 7:
alert("中等")
break;
case 6:
alert("及格")
break;
case 5:
case 4:
case 3:
case 2:
case 1:
case 0:
alert("不及格")
break;
default:
alert("输入是无效数值")
break; //记得用 break 结束默认 case。
}
//方案二:
var num17 = oipt07.value
console.log(num17,oipt07.value)
switch(true){ //注意冒号: !! case 后的常量指的是常量表达式(num17 >= 90....)，它必须是整数类型
case num17 >=90 && num17 <=100: //多个case可共享一个代码命令
alert("优秀")
break;
case num17 >=80:
alert("良好")
break;
case num17 >= 70:
alert("中等")
break;
case num17 >=60:
alert("及格")
break;
case num17 <60 && num17 >=0:
alert("不及格")
break;
default:
alert("输入是非法数值")
break; //记得用 break 结束默认 case。
}
}
</script>
switch执行原理: 用switch括号内的结构与后面case内的状态相比对,对应哪个状态则执行哪个case的代码
case 后的常量指的是常量表达式，它必须是整数类型。
多个case可共享一个代码命令
记得用 break 结束默认 case.
switch 与 if都可以实现分支,
1.当应用场景具有范围或条件是用if elseif else
2.当条件为具体某个特殊值则使用switch
循环结构：for循环 while循环
for 循环:
for(初始化表达式:条件表达式;条件改变表达式){
循环体:{需要被循环的代码
}
以下是for循环的部分练习:
// 输出h1到h6 的标题
for(var i03 = 1;i03 <= 6;i03++){
document.write("<h"+i03+">标题"+i03+"</h"+i03+">") // 采用变量连接符
}
//求1~100的和:
<script type="text/javascript">
var i05 = 0 // 和
for(var i04 = 1;i04 <= 100;i04++){
i05 += i04
}
document.write(i05)
//求1~100的奇数和:
var i06 = 0
for(var i07 = 1;i07 <= 100;i07 = i07 +2){
i06 += i07
}
var i08 = 0
for(var i09 = 1;i09 <= 100;i09++){
//i09 % 2 = 1 为奇数
//i09 % 2 = 0 为偶数
if(i09 % 2 == 1){ //用==表示等于 用=表示赋值
i08 += i09
}
}
document.write(i06,"<br>",i08)
//求1~100中可被3整除的整数之和:
var i10 = 0
for(var i11 = 1;i11 <= 100;i11++){ //或者写成for(var i11 = 1;i11 <= 100;i11 += 3)
if(i11 % 3 == 0){
i10 += i11
}
}
document.write(i10)
//列出1840~2100之间的闰年(400的倍数 或 4的倍数而非100的倍数):
for(var i15 =1840;i15 <= 2100;i15++){
if((i15 % 4 == 0 )&& (i15 % 100 != 0) || (i15 % 400 == 0)){ //注意== !=
document.write(i15,"<br>")
}
}
while循环:
while(条件){
循环体;
}
//当一张纸的厚度为0.01毫米,对折多少次能超过1米?
var paper = 0.01
var count = 0
while(paper < 1000){
paper = paper * 2
count++
}
document.write(count,"<br>")
for循环与while循环的区别:
- 当知道循环的次数时,可使用for 也可以使用while.但是推荐使用for
- 当不知道循环次数且何时结束时则使用while循环
do while循环:
do{
循环体
}while(条件表达式);
var i19 = 0
do{
document.write(i19,"<br>")
i19++
}while(i19 <= 3)
while循环与do while循环的区别:
- do while 循环会先执行一次循环体再开始判断 循环体执行次数 >= 1
- while循环先进行判断在执行,循环体执行次数 >= 0
扫一扫
646
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
