本文章列举了多个JavaScript的函数案例,帮助大家理解和使用函数,包括函数的封装调用,参数的传递,switch,continue 练习。提供源码为初学者进行更好的学习。
目录
案例一,封装数字补零案例
描述:当传递值为以为小于10时在数字的前面补零,传递的值大于等于10时则原数返回
<h1>案例一:封装数字补零案例</h1>
<p>
描述:当传递值为以为小于10时在数字的前面补零,传递的值大于等于10时则原数返回
</p>
<input type="text" id="shi" />
<button id="ling">点击补零</button>
var inp1 = document.getElementById("shi");
var but = document.getElementById("ling");
var bu = function (a) {
if (a == null || a == undefined || a == 0) {
alert("输入的数字为空!");
} else if (a == " " || isNaN(a)) {
alert("输入的非数字!");
} else if (a > 10) {
alert("返回数字" + a);
} else {
alert("返回数字前补充:0" + a);
}
return a;
};
but.onclick = function () {
// var aaa=Number()
bu(inp1.value);
console.log(inp1.value);
};
案例二:switch练习
描述:弹窗输入水果的名称,返回水果的价格,如:输入‘苹果’则返回苹果2.5/斤
只能输入,苹果,西瓜,香蕉和桃子
<h1>案例二:switch练习</h1>
<p>
描述:弹窗输入水果的名称,返回水果的价格,如:输入‘苹果’则返回苹果2.5/斤
</p>
<p>只能输入,苹果,西瓜,香蕉和桃子</p>
<button id="shuiguo">点击输入水果</button>
var but1 = document.getElementById("shuiguo");
var shui = function (b) {
switch (b) {
case 1:
alert("苹果2块钱一斤");
break;
case 2:
alert("香蕉1块钱一斤");
break;
case 3:
alert("桃子3块钱一斤");
break;
case 4:
alert("西瓜0.5块钱一斤");
break;
}
};
shuiguo.onclick = function () {
var mingzi = prompt("请输入水果名字");
if (mingzi == "苹果") {//使用if语句把苹果,香蕉等变成字符1,2,3,4来配合switch
b = 1;
shui(b);
} else if (mingzi == "香蕉") {
b = 2;
shui(b);
} else if (mingzi == "桃子") {
b = 3;
shui(b);
} else if (mingzi == "西瓜") {
b = 4;
shui(b);
} else {
alert("只能输入,苹果,西瓜,香蕉和桃子,重新点击按钮输入!");
}
};
案例三:函数封装案例
描述:输入年份,根据传入的年份返回当前年份的2月份有几天(将平年和闰年的判断案例 封装成函数直接用)
<h1>案例三:函数封装案例</h1>
<p>
描述:输入年份,根据传入的年份返回当前年份的2月份有几天(将平年和闰年的判断案例
封装成函数直接用)
</p>
<input type="text" id="inp" />
<button id="nian">输入年份后点击判断</button>
var nian = document.getElementById("nian");
var inp = document.getElementById("inp");
var run = function (a) {
if (a == null || a == 0) {
alert("没有输入年份!");
} else if (a <= 0) {
alert("输入年份有错误!");
} else if (a % 400 == 0 || (a % 4 == 0 && a % 100 != 0)) {
alert("输入年份为闰年!所以二月份有29天");
} else {
alert("输入年份不是闰年!所以二月份有28天");
}
};
nian.onclick = function () {
run(inp.value);
};
案例四:计算圆的面积
描述:定义一个函数,可以传入的半径来计算圆的面积,并返回计算结果(圆的面积公式:
π *r*r) 在函数外打印出圆的面积
<h1>案例四:return练习</h1>
<p>
描述:定义一个函数,可以传入的半径来计算圆的面积,并返回计算结果(圆的面积公式:
π *r*r) 在函数外打印出圆的面积
</p>
<p>请输入圆的半径</p>
<input type="text" id="banjing" />
<button id="mianji">点击计算圆的面积</button>
var banjing = document.getElementById("banjing");
var mianji = document.getElementById("mianji");
var jisuan = function (r) {
if (!isNaN(r)) {
var area = r * r * Math.PI;
var girth = 2 * r * Math.PI;
alert("圆的面积是" + area + "周长为" + girth);
return area;
} else {
alert("输入数字错误");
}
};
mianji.onclick = function () {
var s = Number(banjing.value);
jisuan(s);
};
案例五: continue 练习
计算出1到100所有不能被7整除的整数之和(用continue)
<h1>案例五: continue 练习</h1>
<p>计算出1到100所有不能被7整除的整数之和(用continue)</p>
<button id="qi">点击计算计算出1到100所有不能被7整除的整数之和</button>
var qi = document.getElementById("qi");
var qihe = function () {
var sum = 0;
for (var i = 1; i < 101; i++) {
if (i % 7 == 0) {
continue;
}
sum += i;
}
alert("1到100所有不能被7整除的整数之和为" + sum);
console.log(sum);
};
qi.onclick = function () {
qihe();
};