JS-流程控制汇集

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>流程控制</title>
<style type="text/css">
.mg {
display: inline-block;
padding: 45px;
padding-top: 5px;
margin-bottom: 10px;
border: 3px solid rosybrown;
-webkit-border-radius: 23px;
-moz-border-radius: 23px;
border-radius: 23px;
}

input {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
border: 1px solid royalblue;
padding: 10px;
}

#dx {
width: 100px;
text-align: center;
}
</style>
<script type="text/javascript">
//1-- if else多重
// cc()函数，通过练习if else，执行一个多重的判断语句，来得到一个人的成绩处于什么水平并通过innerHTML写进标签内
function cc() {
var vj = parseInt(prompt(‘请输入你的成绩‘));
var nr = document.getElementById(‘h1‘);
nr.style.textAlign = ‘center‘;
var cc = document.getElementById(‘cc‘);
cc.value = vj;
if(vj != undefined) { //不为空的情况下再进行判断
if(vj >= 0 && vj < 60) {
nr.innerHTML = ‘很遗憾！你没有通过考试。加油了！‘; //把总结写到一个h1里边
cc.style.color = nr.style.color = ‘red‘; //不同的成绩不同的颜色表示
} else if(vj >= 60 && vj < 75) {
nr.innerHTML = ‘恭喜你获得了良好的成绩！‘;
cc.style.color = nr.style.color = ‘green‘;
} else if(vj >= 75 && vj < 85) {
nr.innerHTML = ‘可以，成绩很好呀！继续加油！‘;
cc.style.color = nr.style.color = ‘royalblue‘;
} else if(vj >= 85 && vj <= 100) {
nr.innerHTML = ‘你很优秀！超级棒！请继续努力！‘;
cc.style.color = nr.style.color = ‘darkmagenta‘;
// nr.style.backgroundColor = ‘green‘;
} else if(vj < 0 || vj > 100) { //如果输入超出的不符合成绩值，也弹出提醒
alert(‘别闹了，快输入你的正确成绩吧!‘);
} else {
alert(‘正经点！！不要输入非法值。‘)
}
} else {
alert(‘怎么还不舍得告诉我么？快快输入有效的成绩值啊！‘);
}
}

//2--if else多重
// cb()函数，也是多重if else，通过value得到表单的值来判断这个年龄段是什么时候

function cb() {
var sv = document.getElementById(‘se_v‘).value;
var tv = document.getElementById(‘t_sc‘);
if(sv == ‘0-44‘) {
tv.value = ‘青少年阶段‘;
} else if(sv == ‘45-59‘) {
tv.value = ‘中年时期‘;
} else if(sv == ‘60-89‘) {
tv.value = ‘老年时期‘;
} else {
tv.value = ‘长寿老人‘;
}
}

//3--switch
// cj（）函数练习switch，根据成绩写评语。注意对比switch和if else 的区别
// 这里总是出现错误的是，标签内容你用value获取，而input的表单内容你反倒用innerHTML了，不报错也，但就是不对，切记切记、
function cj() {
var cj = parseInt(prompt(‘请输入你的成绩‘));
var hv = document.getElementById(‘hvs‘);
switch(cj) {
case 1:
case 2:
case 3:
case 4:
case 5:
hv.innerHTML = ‘继续努力‘;
break;
case 6:
hv.innerHTML = ‘及格，加油！‘;
break;
case 7:
hv.innerHTML = ‘凑合，奋进！‘;
break;
case 8:
hv.innerHTML = ‘很棒，很棒！‘;
break;
case 9:
case 10:
hv.innerHTML = ‘高手，大牛！‘;
break;
}
document.getElementById(‘cj‘).value = cj;
alert(‘h1的value要用innerHTML才能找得到‘ + ‘<br/>‘ + hv.innerHTML)
}

//4--switch
// cd（）制作多选情况下的输出内容
//不成功
function cd() {
var dx = document.getElementById(‘dx‘).value;
var dxv = document.getElementById(‘dxv‘);
var arr = [];
for(var i = 0; i < dx.length; i++) {
arr[i] = document.getElementById(‘dx‘).value;
dxv.innerHTML = arr + ‘，‘;
}

// switch(dx){
// case ‘苹果‘:
// case ‘香蕉‘:
// case ‘橘子‘:
// case ‘油桃‘:
// case ‘柠檬‘:
// case ‘柚子‘:
// case ‘西瓜‘:
// case ‘菠萝‘:
// case ‘荔枝‘:
//
// break;
// }
}
</script>
</head>

<body>
<div>
<h1>知识点汇总</h1>
<ol>
<li> <strong>if </strong><br />单个是做判断（成，就执行。不成，就滚蛋！）</li>
<li> <strong>if else </strong><br />一组是二选一（成，执行条件1，否则，执行另一个）</li>
<li> <strong>if else </strong><br />多个是多重判断（多个条件看谁成，最后只执行成的那一个）</li>
<li> <strong>switch </strong><br />是多种选择（相比多组if else，可以同时执行多个满足条件后 的函数）</li>
<li> <strong>for </strong><br />是重复重复（遍历）</li>
<li> <strong>while </strong><br />是反反复复</li>
<li> <strong>do while </strong><br />是来来回回</li>
<li> <strong>break </strong><br />是退出循环</li>
<li> <strong>continue </strong><br />是跳过并继续循环</li>
</ol>
</div>

<!--1-->
<span class="mg">
练习1 if else
<h1 id="h1"></h1>
<input type="text" id="cc" onclick="cc();" placeholder="输入成绩" />
</span>

<!--2-->
<span class="mg">
练习2 if else<br />
<strong>请选择您的年龄段</strong>
<select id="se_v">
<option>0-44</option>
<option>45-59</option>
<option>60-89</option>
<option>90以上</option>
</select>
<input type="button" value="提交" onclick="cb();" />
<br />
<input type="text" id="t_sc" />
</span>

<!--3-->
<span class="mg">
练习3:switch
<h1 id="hvs"></h1>
<input type="text" id="cj" onclick="cj();" placeholder="输入成绩" />
</span>

<!--4-->
<span class="mg">
练习4 switch<br />
<p style="color: red;">不成功</p>
<p>选出你喜欢的水果：</p>
<strong>可多选</strong>
<select id="dx" multiple="multiple">
<option>苹果</option>
<option>香蕉</option>
<option>橘子</option>
<option>油桃</option>
<option>柠檬</option>
<option>柚子</option>
<option>西瓜</option>
<option>菠萝</option>
<option>荔枝</option>
</select>
<input type="button" value="提交" onclick="cd();" />
<br /><span id="dxv"></span>

</span>

<!--4-->
<script type="text/javascript">
function xq() {
var xqv = document.getElementById(‘xq‘).value;
var jhv = document.getElementById(‘jh‘);
switch(xqv) {
case ‘星期一‘:
case ‘星期二‘:
jhv.innerHTML = ‘学习理念知识‘;
jhv.style.color = ‘red‘;
break;
case ‘星期三‘:
case ‘星期四‘:
jhv.innerHTML = ‘到企业实践‘;
jhv.style.color = ‘blueviolet‘;
break;
case ‘星期五‘:
jhv.innerHTML = ‘总结经验‘;
jhv.style.color = ‘blue‘;
break;
case ‘星期六‘:
case ‘星期日‘:
jhv.innerHTML = ‘休闲娱乐‘;
jhv.style.color = ‘green‘;
break;
}

}
</script>
<span class="mg">
练习5 switch<br />
看我的计划
<select id="xq">
<option>星期一</option>
<option>星期二</option>
<option>星期三</option>
<option>星期四</option>
<option>星期五</option>
<option>星期六</option>
<option>星期日</option>
</select>
<input type="button" value="提交" onclick="xq()" />
<h3 id="jh"></h3>
</span>

<!--6-->

<span class="mg">
练习6 for
<p>做100以内加法</p>
<input type="button" value="结果" id="jg"/>
<input type="text" id="jgv"/>
<pre>这里，i应该<=100，没有=号是不可以的</pre>
</span>
<script type="text/javascript">
var oJg = document.getElementById(‘jg‘);
oJg.onclick = function() {
var sum = 0;
for(var i = 0; i <= 100; i++) { //注意=号
sum += i;
}
document.getElementById(‘jgv‘).value = sum;
}
</script>

<!--7-->
<span class="mg">
练习7 while
<br/>用while语句，输出相应的数字

<input type="button" value="填数字得结果" onclick="sc()" />
<br />结果是<p id="sc"></p>
<!--<input />-->
</span>
<script type="text/javascript">
function sc() {
var x = parseInt(prompt(‘请输入数字‘));
// alert(x)
if(isNaN(x)) { //判断如果是空或不是数字，就不执行
alert(‘请输入数值后再确定‘)
} else {
var num = 1;
while(num <= x) {
// document.write(‘<br/>取出第‘+num);
document.getElementById(‘sc‘).innerHTML += num + ‘,‘;
// alert(document.getElementById(‘sc‘).innerHTML);
num = num + 1;
}
}
}
</script>
<p>js思考，写法之——第一步，先思考简单的，给定的一个数字，让条件在这个给定的数字内循环。<br/>然后第二步修改完善提高代码，就是把死的数值变成可以让用户自己填写的数字。<br/>最后第三步继续修改，添加if代码以判断用户填入的是否是数值，且是否符合规范等</p>

<!--8-->
<span class="mg">
练习8
do while
<p>确保代码先被执行一次再去做循环判断条件</p>
<input type="button" value="填数字" onclick="dov()" />
<span id="dov"></span>
</span>
<script type="text/javascript">
//写法之——第一步，先思考简单的，给定的一个数字，让条件在这个给定的数字内循环。然后第二步修改完善提高代码，就是把死的数值变成可以让用户自己填写的数字。最后第三步继续修改，添加if代码以判断用户填入的是否是数值，且是否符合规范等

//第一步示例
// var num = 1;
// do{
// document.getElementById(‘dov‘).innerHTML += num + ‘,‘;
// num++;
// }while(num <= 9);

//第二步示例
// var numa = parseInt(prompt(‘请填写数字‘));
// var numb = 0;
// do{
// document.getElementById(‘dov‘).innerHTML += numb + ‘,‘;
// numb ++;
// }while(numb <= numa);

//第三步示例
function dov() {
var numa = parseInt(prompt(‘请填写数字‘));
var numb = 0;
do {
document.getElementById(‘dov‘).innerHTML += numb + ‘,‘;
numb++;
} while (numb <= numa);
if(isNaN(numa)) {
alert(‘快快随心输入正确数字吧！‘);
} else {

}
}
</script>
</body>

</html>

时间： 2024-11-03 02:14:17

JS-流程控制汇集的相关文章

Js 流程控制

流程控制 顺序.分支.循环 顺序结构 代码一行一行从上往下执行并解析 分支结构 if语句 switch语句 if语句 单分支 if(条件表达式){ ????//语句块 } 含义:当条件表达式为真的时候就执行里面的语句块 示例: 双分支: if(条件表达式){ ????//语句块1 }else{ ????//语句块2 } 含义:如果条件表达式成立则执行语句块1,否则则执行语句块2 ? Window.prompt(text[,defaultText]); 说明: ????提供一个用户输入对话框 ??

JS流程控制（语句）

一.流程控制 1. 作用:控制代码的执行顺序 2. 分类: (1) 顺序结构:从上到下依次执行代码语句 (2) 分支/选择结构 1. if语句 简单if结构 if(条件表达式){ 表达式成立时执行的代码段 } 注意 : 除零值以外,其他值都为真,以下条件为假值false if(0){} if(0.0){} if(""){} //空字符串 if(undefined){} if(NaN){} if(null){} 特殊写法 : { }可以省略,一旦省略,if语句只控制其后的第一行代码 va

JS流程控制

1.if...else... //if 语句:只有当指定条件为 true 时,该语句才会执行代码. //语法 if (condition) { 当条件为 true 时执行的代码 } //if...else 语句:请使用 if....else 语句在条件为 true 时执行代码,在条件为 false 时执行其他代码. //语法 if (condition) { 当条件为 true 时执行的代码 } else { 当条件不为 true 时执行的代码 } //if...else if...else 语

EventProxy流程控制

EventProxy是一个通过控制事件触发顺序来控制业务流程的工具. 1. 利用事件机制解耦复杂业务逻辑 2. 移除被广为诟病的深度callback嵌套问题 3. 将串行等待变成并行等待,提升多异步协作场景下的执行效率 4. 友好的Error handling node.js的亮点是回调函数,node.js流程控制.传参都是通过回调函数来实现的.开发中经常会遇到回调嵌套的场景,尤其是在业务复杂的场景下,会嵌套n层回调函数,这样做的原因是为了控制代码执行的流程. 下面是一个需要同步读取文件的例子

js 异步流程控制之 avQ(avril.queue)

废话前言 写了多年的js,遇到过最蛋疼的事情莫过于callback hell, 相信大家也感同身受. 业界许多大大也为此提出了很多不错的解决方案,我所了解的主要有: 朴灵 event proxy, 简单明了容易上手 老赵的 wind.js, 写起来最舒坦,最能表达程序顺序执行逻辑 Promise,个人感觉为解决一个坑引入另外一个坑,写出来的代码一大坨,代码可读性最差 我这人闲着没事也爱折腾,我也自己造轮子,不为别的只为自己代码写的舒服流畅. 传送门:目前只支持 node.js 环境,以后有时间再

Node.js 使用Nimble实现串行流程控制

Nimble是Node.js下的流程控制工具. 使用如下命令进行安装: npm install nimble 测试代码: var flow = require('nimble'); flow.series([ function (callback) { setTimeout(function() { console.log('I excute first.'); callback(); }, 1000); }, function (callback) { setTimeout(function(

Node.js 使用回调函数实现串行流程控制

下面是一个使用Node.js回调函数实现串行流程控制的示例: setTimeout(function() { console.log('I excute first.'); setTimeout(function() { console.log('I excute next.'); setTimeout(function() { console.log('I excute last.'); }, 100); }, 500); }, 1000);

node.js对mongodb的连接&amp;增删改查（附async同步流程控制）

1.启动mongodb数据库 官网下载mongodb数据库 在mongodb根目录下创建文件夹:假设取名为test. 我们认为test就是mongodb新建的数据库一枚. 创建批处理文件 xxx.bat,内容如下: 运行e盘mongodb文件夹下bin目录下的 mongod.exe,参数为 -dbpath E:\mongodb\test. E:\mongodb\bin\mongod.exe -dbpath E:\mongodb\test 这样就启动了mongodb下test数据库的服务器. 2.

Node.js异步流程控制

原文地址:Node.js异步流程控制 原文地址:https://www.cnblogs.com/edward852/p/8580917.html

Node.js中流程控制

Node.js中的流程控制可以使用async,在使用之前需要先安装,使用npm安装 npm install async --g 下面主要介绍4种流程控制的方式: 1.串行无关联:async.series(tasks,callback) 多个函数依次执行,之间没有数据交换,其中一个函数出错,后续函数不再执行; 以下是标准写法: async.series({ one: function(callback){ callback(null, 1); }, two: function(callback){