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得到表单的值来判断这个年龄段是什么时候

//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>

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

<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>

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

<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>

<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>

<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>

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

<input type="button" value="填数字得结果" onclick="sc()" />
<br />结果是<p id="sc"></p>

</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>

<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>

<h1>综合练习</h1>
<p>根据获得的信息，组成数组，并从这一堆数据中找到大一女生的信息，然后把名字打印出来</p>
<script type="text/javascript">
var infos = [
['小A','女',21,'大一'],
['小B','男',23,'大三'],
['小C','男',24,'大四'],
['小D','女',21,'大一'],
['小E','女',22,'大四'],
['小F','男',21,'大一'],
['小G','女',22,'大一'],
['小H','女',20,'大三'],
['小I','女',20,'大一'],
['小J','男',20,'大三']
];
// alert(infos[0][1]);
for(var i=0;i<infos.length;i++){
var sex = infos[i][1];
var clas = infos[i][3];
var name = infos[i][0];
// document.write(sex);
if(sex == '女' && clas == '大一'){
document.write(name+'<hr />');
}else{
continue;//这里得用continue，如果不符合的信息跳过去然后接着执行，如果用了break，则就会打出第一个小A的信息后就停止了
}
}
</script>

</body>

</html>

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

js流程控制与函数
流程控制 1.条件语句分支结构单向分支 if (条件表达式){ code... } 双向分支 if (条件表达式){ code... }else{ code... } 多向分支 if (条件表达式 ...
js流程控制；常用内置对象
一.流程控制 1.if .if-else.if-else if-else var ji = 20; if(ji >= 20){ console.log('大吉大利,晚上吃鸡') } alert( ...
Js 流程控制
流程控制顺序.分支.循环顺序结构代码一行一行从上往下执行并解析分支结构 if语句 switch语句 if语句单分支 if(条件表达式){ //语句块 } 含义:当条件表达式为真的时候就执行里 ...
js流程控制题——如何实现一个LazyMan
先说一下想要的效果: lazyMan('zz').eat('lunch').sleep('3').eat('dinner')输出: Hi!This is zz! Eat lunch~ //有3s间隔等 ...
JS流程控制
1.if...else... //if 语句:只有当指定条件为 true 时,该语句才会执行代码. //语法 if (condition) { 当条件为 true 时执行的代码 } //if...el ...
Javascript初识之流程控制、函数和内置对象
一.JS流程控制 1. 1.if else var age = 19; if (age > 18){ console.log("成年了"); }else { console. ...
EventProxy流程控制
EventProxy流程控制 EventProxy是一个通过控制事件触发顺序来控制业务流程的工具. 1. 利用事件机制解耦复杂业务逻辑2. 移除被广为诟病的深度callback嵌套问题3. 将串行等待 ...
08-js流程控制、循环、元素操作
# js流程控制 > 流程控制用于基于不同的条件来执行不同的动作. ### if语句 >if... else ... >if ... else if ... else... > ...
js 异步流程控制之 avQ(avril.queue)
废话前言写了多年的js,遇到过最蛋疼的事情莫过于callback hell, 相信大家也感同身受. 业界许多大大也为此提出了很多不错的解决方案,我所了解的主要有: 朴灵 event proxy, 简 ...
《Node.js In Action》笔记之流程控制
转向Javascript后,开始学习了node.js,选择的第一本书是<Node.js in Action> 将近一个月时间,断断续续看完,选几个点做下笔记 1.实现串行化流程控制 var ...

随机推荐

[HDOJ5442]Favorite Donut（最大表示法）
嗯……就是最小表示法改一下…… 这题就是把S串当作两个判断同构的串,然后就搞出最大的表示了然后在反向再做一次 O(n)求最大表示,O(n)判断正反谁大
[BZOJ 1497][NOI 2006]最大获利（最大权闭合子图）
题目:http://www.lydsy.com:808/JudgeOnline/problem.php?id=1497 分析: 这是在有向图中的问题,且边依赖于点,有向图中存在点.边之间的依赖关系可以 ...
OSPF协议详解
CCNP OSPF协议详解 2010-02-24 20:30:22 标签:CCNP 职场 OSPF 休闲 OSPF(Open Shortest Path Fitst,ospf)开放最短路径优先协议,是 ...
Java Little Knowledge
1.Constructor running order of Base class and Derived class This is Alibaba's audition problem. clas ...
UITextView的使用详解
//初始化并定义大小 UITextView *textview = [[UITextView alloc] initWithFrame:CGRectMake(20, 10, 280, 30)]; te ...
android相关技术及岗位
Android应用开发 Android底层嵌入式 Android架构师应用开发路线javaSE-->java for Android——>eclipse使用技巧-->A ...
SpringMVC自定义视图 Excel视图和PDF视图
一.自定义视图-Excel视图 1.Maven依赖引入POI <dependency> <groupId>org.apache.poi</groupId> < ...
【BZOJ 2818】gcd 欧拉筛
枚举小于n的质数,然后再枚举小于n/这个质数的Φ的和,乘2再加1即可.乘2是因为xy互换是另一组解,加1是x==y==1时的一组解.至于求和我们只需处理前缀和就可以啦,注意Φ(1)的值不能包含在前缀和 ...
gbdt推导和代码
GBDT算法推导过程 m次迭代,n个类别,那么就意味着学习了m*n棵回归树 train过程:假设有8个训练样本,3个类别步骤一.假设所有样本的F矩阵,F矩阵是8*3的,F矩阵刚开始全为0,而实际每个 ...
强联通 HDU 2767 3836
n个点m条边最少需要几条边变成强连通图设有a个结点的入读为0, b个结点的出度为0, 则 max{a, b}就是答案. 注意特殊情况: 当原图已经强连通时, 答案是0而不是1. 加一条边少一个入度 ...

JS-流程控制汇集

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

随机推荐

热门专题