JavaScript部分案例

程序员文章站 2022-11-07 08:27:00

JavaScript 是 Web 的编程语言。所有现代的 HTML 页面都使用 JavaScript。 JavaScript 非常容易学。阅读本教程，您需要有以下基础： HTML 教程 CSS 教程 HTML 教程 CSS 教程 PS ：JavaScript 一直在升级，请等待 01、电灯的开关 ......

javascript 是 web 的编程语言。

所有现代的 html 页面都使用 javascript。

javascript 非常容易学。

阅读本教程，您需要有以下基础：

ps ：javascript 一直在升级，请等待

01、电灯的开关

<img id="light" src="img/off.gif">
<script>
    /*
        1、获取图片对象
          2、绑定点击事件
           3、切换图片
                使用flag标注状态
    * */
        var element = document.getelementbyid("light");
        var flag = false;//关闭状态

        element.onclick = function (ev) {
            if(flag){//如果灯开着
                element.src = "img/off.gif";
                flag = false;
            }else{
                element.src = "img/on.gif";
                flag = true;
            }
        }
</script>

02、设置时间弹出链接
<p>
   <span id="time">5</span>之后跳转
  </p>
  <script>
   var data = 5;
   function fun(){
    data--;
    if(data<=0){
     location.href="https://www.sina.cn";
    }
    time.innerhtml = data;
   }
   setinterval(fun,1000);
  </script>

  03、轮播图
  <img src="img/img/banner_1.jpg" id="img" width="100%" />
  <script>
   var number =1;
   function fun(){
    number++;
    if(number>3){
     number=1;
    }
       var img =document.getelementbyid("img");
       img.src="img/img/banner_"+number+".jpg";
   }
   setinterval(fun,3000);
  </script>

 04.多级联动

<select id="city">
    <option>成都</option>
    <option>德阳</option>
    <option>绵阳</option>
</select>
<script>
    var pro = document.getelementbyid("pro");
    var city = document.getelementbyid("city");
    function choice() {
        var _pro = pro.value
        switch (_pro) {
            case "sc":
                city.innerhtml = "<option>成都</option>\n" +
                       "       <option>德阳</option>\n" +
                       "       <option>绵阳</option>"
                break;
            case "cq":
                    city.innerhtml = "<option>重庆</option>";
                break;
            case "gd":
                      city.innerhtml = "<option>广州</option>\n" +
                       "       <option>深圳</option>\n" +
                       "       <option>东莞</option>"
                break;
        }
    }
</script>

05.动态表格

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>动态表格</title>

}

        td, th {
            text-align: center;
            border: 1px solid;

}

        div {
            text-align: center;
            margin: 50px;
        }
    </style>

</head>
<body>

</div>

<table cellspacing="0" cellpadding="0">
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

             //3、创建td，赋值td的标签体
             //id的td
             var td_id = document.createelement("td");
             var text_id = document.createtextnode(id);
             td_id.appendchild(text_id);
             //name的td
             var td_name = document.createelement("td");
             var text_name = document.createtextnode(name);
             td_name.appendchild(text_name);
             //gender的td
             var td_gender = document.createelement("td");
             var text_gender = document.createtextnode(gender);
             td_gender.appendchild(text_gender);
             //a标签的td
             var td_a = document.createelement("td");
             var ele_a = document.createelement("a");
             ele_a.setattribute("href","javascript:void(0)");
             ele_a.setattribute("onclick","deltr(this);");
             var text_a = document.createtextnode("删除");
             ele_a.appendchild(text_a);
             td_a.appendchild(ele_a);

             var tr = document.createelement("tr");
             tr.appendchild(td_id);
             tr.appendchild(td_name);
             tr.appendchild(td_gender);
             tr.appendchild(td_a);

document.getelementsbytagname("table")[0].appendchild(tr);
}*/

        // 1、获取按钮
        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;
            //3、获取table
            var table = document.getelementsbytagname("table")[0];
            // 4、追加一行
            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);
        }

</script>

</table>

</body>
</html>

06.表格全选

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }

        .out{
            background-color: white;
        }
        .over{
            background-color: pink;
        }
    </style>

</script>

</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstcb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

<tr>
        <td><input type="checkbox" name="cb" ></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>
</table>
  
  <div>
      <input type="button" id="selectall" value="全选" />
      <input type="button" id="unselectall" value="全不选" />
      <input type="button" id="selectrev" value="反选" />

     <script>
     var selectall =document.getelementbyid("selectall");
     var cbs =document.getelementsbyname("cb");
     selectall.onclick=function(){
       for (var i=0;i<cbs.length;i++) {
        cbs[i].checked = true;
       }
     }
     var unselectall =document.getelementbyid("unselectall");
     var cbs =document.getelementsbyname("cb");
     unselectall.onclick=function(){
       for (var i=0;i<cbs.length;i++) {
        cbs[i].checked = false;
       }
     }
     var selectrev=document.getelementbyid("selectrev");
     var cbs =document.getelementsbyname("cb");
     selectrev.onclick=function(){
       for (var i=0;i<cbs.length;i++) {
        cbs[i].checked = !cbs[i].checked;
       }
     }
     </script>
  </div>
</body>
</html>

07.输出时间

 <script>
   var mydate =new date();
   var year =mydate.getfullyear();
   var month =mydate.getmonth()+1;
   var day =mydate.getdate();
   var hour =mydate.gethours();
   var min =mydate.getminutes();
   var second = mydate.getseconds();
   //如果为单数时，在前面补0
   year = year < 10 ? "0" :year;
   month =month <10 ? "0" :month;
   day =day < 10 ? "0" :day;
   hour = hour <10 ? "0" :hour;
   min =min <10 ? "0" :min;
   second = second <10 ? "0" :second;
   //输出时间
   document.write(year+"-"+month +"-"+day+"-"+hour+"-"+min+"-"+second);
  </script>

08.根据输入的行和列，创建表格

<div>

请输入你想创建的表格：

行：<input type="text" id="row">

列：<input type="text" id="col">
    <input type="button" id="creat" value="创建" onclick="creat()">
</div>

<div id="div1">
</div>
<script>
    function creat() {
        var row = document.getelementbyid("row").value;
        var col = document.getelementbyid("col").value;
        var div1 = document.getelementbyid("div1");

        var tab = "<table border=‘1‘ cellpadding=‘0‘ cellspacing=‘0‘ style=‘margin: 50px auto‘>";
        for (var i = 1; i <= row; i++) {
            tab += "<tr>";
            for (var j = 1; j <= col; j++) {
                tab += "<td style=‘width: 50px;height: 30px;‘>aa</td>";
            }
            tab += "</tr>";
        }
        tab += "</table>";
        div1.innerhtml = tab;
    }
</script>

09.表单验证

<form id="form">
    用户名：<input type="text" id="username" name="name" onblur="checkname()">
    <span id="sp_name"></span>
    <br>
    <input type="submit">
</form>

<script>
    window.onload = function (ev) {
        document.getelementbyid("form").onsubmit = function (ev1) {
            return checkname();
        }
    }
    function checkname() {
        var useranme = document.getelementbyid("username").value;
        var sp_name= document.getelementbyid("sp_name");
        var regexp = new regexp("^.{3,20}$");
        if(regexp.test(useranme)){
            sp_name.innerhtml = "可以注册";
            sp_name.style.color = "green";
            return true;
        }else{
            sp_name.innerhtml = "用户名格式有误";
            sp_name.style.color = "red";
            return false;
        }
    }
</script>

上一篇： OPPO Reno 3系列12月见：首发高通5G芯片支持SA/NSA 5G双模

下一篇：迄今最强小米MIX Alpha环绕屏技术科普

JavaScript部分案例

MySQL优化案例系列-mysql分页优化

ios开发：一个音乐播放器的设计与实现案例

iOS动画案例(1) 类似于qq账号信息里的一个动画效果

c# list部分操作实现代码

ThreadLocal使用案例_动力节点Java学院整理

深入浅析PHP无限极分类的案例教程

JavaScript实现页面中录音功能的方法

自定义javascript验证框架示例【附源码下载】

JavaScript判断对象和数组的两种方法

IOS ObjectC与javascript交互详解及实现代码