JavaScript的一些特效

最新推荐文章于 2025-06-25 09:01:46 发布

原创最新推荐文章于 2025-06-25 09:01:46 发布 · 358 阅读

1 ·

CC 4.0 BY-SA版权

本文深入探讨JavaScript在实际项目中的应用，包括轮播图实现、电灯开关效果、倒计时自动跳转、表格操作如追加行和全选功能，以及表单校验等实用技巧，适合前端开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript轮播图

<body>
<img src="img/banner_1.jpg"  id="789" />

2.JavaScript电灯开关

3.倒计时自动跳转百度页面倒计时 5秒，跳转到百度 4.表格追加

document.getElementById(“btn_add”).onclick = function() {
//2.获取文本框的内容
var id = document.getElementById(“id”).value;
var name = document.getElementById(“name”).value;
var gender = document.getElementById(“gender”).value;

    //获取table
    var table = document.getElementsByTagName("table")[0];

    //追加一行
    table.innerHTML += "<tr>\n" +
        "        <td>"+id+"</td>\n" +
        "        <td>"+name+"</td>\n" +
        "        <td>"+gender+"</td>\n" +
        "        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" +
        "    </tr>";
}


//删除方法
function delTr(obj){
    var table = obj.parentNode.parentNode.parentNode;
    var tr = obj.parentNode.parentNode;

    table.removeChild(tr);
}

5.表格全选和全不选
window.onload = function(){
//2.给全选按钮绑定单击事件
document.getElementById(“selectAll”).onclick = function(){
//全选
//1.获取所有的checkbox
var cbs = document.getElementsByName(“cb”);
//2.遍历
for (var i = 0; i < cbs.length; i++) {
//3.设置每一个cb的状态为选中 checked
cbs[i].checked = true;
}
}

      document.getElementById("unSelectAll").onclick = function(){
          //全不选
          //1.获取所有的checkbox
          var cbs = document.getElementsByName("cb");
          //2.遍历
          for (var i = 0; i < cbs.length; i++) {
              //3.设置每一个cb的状态为未选中  checked
              cbs[i].checked = false;
          }
      }

      document.getElementById("selectRev").onclick = function(){
          //反选
          //1.获取所有的checkbox
          var cbs = document.getElementsByName("cb");
          //2.遍历
          for (var i = 0; i < cbs.length; i++) {
              //3.设置每一个cb的状态为相反
              cbs[i].checked = !cbs[i].checked;
          }
      }

      document.getElementById("firstCb").onclick = function(){
          //第一个cb点击
          //1.获取所有的checkbox
          var cbs = document.getElementsByName("cb");
          //获取第一个cb

          //2.遍历
          for (var i = 0; i < cbs.length; i++) {
              //3.设置每一个cb的状态和第一个cb的状态一样
              cbs[i].checked =  this.checked;
          }
      }

6.表单校验
/*
分析：
1.给表单绑定onsubmit事件。监听器中判断每一个方法校验的结果。
如果都为true，则监听器方法返回true
如果有一个为false，则监听器方法返回false

        2.定义一些方法分别校验各个表单项。
        3.给各个表单项绑定onblur事件。



 */

window.onload = function(){
    //1.给表单绑定onsubmit事件
    document.getElementById("form").onsubmit = function(){
        //调用用户校验方法   chekUsername();
        //调用密码校验方法   chekPassword();
        //return checkUsername() && checkPassword();

        return checkUsername() && checkPassword();
    }

    //给用户名和密码框分别绑定离焦事件
    document.getElementById("username").onblur = checkUsername;
    document.getElementById("password").onblur = checkPassword;
}

//校验用户名
function checkUsername(){
    //1.获取用户名的值
    var username = document.getElementById("username").value;
    //2.定义正则表达式
    var reg_username = /^\w{6,12}$/;
    //3.判断值是否符合正则的规则
    var flag = reg_username.test(username);
    //4.提示信息
    var s_username = document.getElementById("s_username");

    if(flag){
        //提示绿色对勾
        s_username.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
    }else{
        //提示红色用户名有误
        s_username.innerHTML = "用户名格式有误";
    }
    return flag;
}

//校验密码
function checkPassword(){
    //1.获取用户名的值
    var password = document.getElementById("password").value;
    //2.定义正则表达式
    var reg_password = /^\w{6,12}$/;
    //3.判断值是否符合正则的规则
    var flag = reg_password.test(password);
    //4.提示信息
    var s_password = document.getElementById("s_password");

    if(flag){
        //提示绿色对勾
        s_password.innerHTML = "<img width='35' height='25' src='img/gou.png'/>";
    }else{
        //提示红色用户名有误
        s_password.innerHTML = "密码格式有误";
    }
    return flag;
}