JavaScript 函数

反驳 4 楼 不愿透漏姓名 Croc 代码存在 bug，当我手动点击一个一个选中后，在点击按钮会出现无法取消操作，需要点击两次。

改正后代码如下：

var checkAll = false;
function allcheck() {
    let inputs = document.getElementsByName('checkbox');
    var checkInt = 0;
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked) {
            checkInt += 1;
        }
    }
    if (checkInt == inputs.length) {
        checkAll = false;
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = checkAll
        }
    } else {
        checkAll = true;
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].checked = checkAll
        }
    }
}

JavaScript 复选框实现全选、取消全选 、反选实例：

function opcheckboxed(objName, type){
  var objNameList=document.getElementsByName(objName);
  if(null!=objNameList){
    for(var i=0;i<objNameList.length;i++){  
      if(objNameList[i].checked==true)
      {
        if(type != 'checkall') {  // 非全选
          objNameList[i].checked=false;
        }
        
      } else {
        if(type != 'uncheckall') {  // 非取消全选
          objNameList[i].checked=true;
        }
      }
    }  
  }
}

尝试一下 »

将选中设置为 checked 或 true， 取消选中可设置为空或 false，实现反选使用 checked 属性会出现问题。

ES6 新增箭头函数，定义函数时更加简洁、易读。

// 传统定义函数方式
function Test () {
  //
}

const Test = function () {
  //
}

// 使用箭头函数定义函数时可以省略 function 关键字
const Test = (...params) => {
  //
}

// 该函数只有一个参数时可以简写成：
const Test = param => {
  return param;
}

console.log(Test('hello'));   // hello

作为参数的的变量称为形参,带入的参数称为实参。

function myFunction(a,b){ return a*b;}  // 形参
document.getElementById("demo").innerHTML=myFunction(4,3);  // 实参

对于上述同学的笔记里JavaScript 多选框多选与取消多选实例，这次用按钮来统一实现:

var checkAll = false;
function allcheck(){
    checkAll = !checkAll;
    let inputs = document.getElementsByName('checkbox')
    for(var i =0;i<inputs.length;i++){inputs[i].checked = checkAll}
}

尝试一下 »

JavaScript 多选框多选与取消多选实例：

function checkboxed(objName){
    var objNameList=document.getElementsByName(objName);    

    if(null!=objNameList){
        alert("全选操作");
        for(var i=0;i<objNameList.length;i++){
            objNameList[i].checked="checked";
        }
    }
}

function uncheckboxed(objName){
    var objNameList=document.getElementsByName(objName);    

    if(null!=objNameList){
        alert("取消全选操作");
        for(var i=0;i<objNameList.length;i++){
            objNameList[i].checked="";
        }
    }
}

尝试一下 »

使用 HTML 、JavaScript 创建一个简单的计算器，包含加、减、乘、除四个功能：

var result_1;
//加法
function add() {alert(1);
  var a = getFirstNumber();
  var b = getTwiceNumber();
  var re =Number( a) +Number( b);
  sendResult(re);
}

//减法
function subtract() {
  var a = getFirstNumber();
  var b = getTwiceNumber();
  var re = a - b;
  sendResult(re);
}

//乘法
function ride() {
  var a = getFirstNumber();
  var b = getTwiceNumber();
  var re = a * b;
  sendResult(re);
}

//除法
function devide() {
  var a = getFirstNumber();
  var b = getTwiceNumber();
  var re = a / b;
  sendResult(re);
}

//给p标签传值
function sendResult(result_1) {
  var num = document.getElementById("result")
  num.innerHTML = result_1;
}

//获取第一位数字
function getFirstNumber() {
  var firstNumber = document.getElementById("first").value;
  return firstNumber;
}

//获取第二位数字
function getTwiceNumber() {
  var twiceNumber = document.getElementById("twice").value;
  return twiceNumber;
}

更多实例

在使用 return 语句时，函数会停止执行，并返回指定的值。例如：

sayHi();
function sayHi(name,message){
    document.write("return 语句执行前。");
    return;
    alert("hello" + name +"," + message);//这一行永远不会被调用
}

尝试一下 »