JavaScript，函数的多个案例学习

 本文章列举了多个JavaScript的函数案例，帮助大家理解和使用函数，包括函数的封装调用，参数的传递，switch，continue 练习。提供源码为初学者进行更好的学习。

目录

案例一，封装数字补零案例

案例二: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();
};