JavaScript常见案例

最新推荐文章于 2022-07-01 17:09:21 发布
最新推荐文章于 2022-07-01 17:09:21 发布
阅读量224 收藏 3
点赞数
分类专栏： JavaScript
原文链接：https://www.cnblogs.com/lyhhary/p/hary1.html
版权

一.点灯开关控制：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <img id="light" src="img/off.gif">

</body>

<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>
</html>
二.5s之后自动出现一张图片：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <span id="time">5</span>
    <img id="img" src="img/gui.jpg" style="display: none">

</body>

<script>
        var time = document.getElementById("time");
        var img = document.getElementById("img");
        var num = time.innerHTML;
        setInterval(function () {
            if(num>1){
                num--;
                time.innerHTML = num;
            }else{
                img.style.display = "block";
            }
        },1000);
</script>
</html>
三.轮播图：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="img" src="img/banner_1.jpg">

</body>

<script>

        var img = document.getElementById("img");
        var num = 1;
        setInterval(function () {
           num++;
           //判断num和3的大小
            if(num>3){
                num = 1;
            }
            img.src = "img/banner_"+num+".jpg";
        },2000);
</script>
</html>
四.省级联动：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
   <select id="pro" οnchange="choice()">
       <option value="sc">四川</option>
       <option value="cq">重庆</option>
       <option value="gd">广东</option>
   </select>

   <select id="city">
       <option>成都</option>
       <option>德阳</option>
       <option>绵阳</option>
   </select>

</body>

<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>
</html>
五.动态表格：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        table{
            border: 1px solid;
            margin : auto;
            width: 500px;
        }
        td{
            border: 1px solid;
        }
        div{
            text-align: center;
        }
    </style>
</head>
<body>

        <div>
            <input type="text" id="id" placeholder="请输入编号">
            <input type="text" id="name" placeholder="请输入名字">
            <input type="text" id="gender" placeholder="请输入性别">
            <input type="button" id="add" value="添加" οnclick="add()">
        </div>

    <table>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>gender</td>
            <td>delete</td>
        </tr>
        <tr>
            <td>1</td>
            <td>coco</td>
            <td>女</td>
            <td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>bobo</td>
            <td>男</td>
            <td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>yoyo</td>
            <td>女</td>
            <td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td>
        </tr>
    </table>

</body>

<script>
        function del(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }

        function add() {
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;

            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)\" οnclick=\"del(this)\">删除</a></td>\n" +
                "        </tr>"

        }
</script>
</html>
六.表格全选：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>


        table{
            border: 1px solid;
            margin : auto;
            width: 500px;
        }
        td{
            border: 1px solid;
        }

    </style>
</head>
<body>


    <table>
        <tr>
            <td></td>
            <td>id</td>
            <td>name</td>
            <td>gender</td>
            <td>delete</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice" ></td>
            <td>1</td>
            <td>coco</td>
            <td>女</td>
            <td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice"></td>
            <td>2</td>
            <td>bobo</td>
            <td>男</td>
            <td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td><input type="checkbox" name="choice"></td>
            <td>3</td>
            <td>yoyo</td>
            <td>女</td>
            <td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td>
        </tr>
    </table>
    <center>
    <button id="qx">全选</button>
    <button id="qbx">全不选</button>
    <button id="fx">反选</button>
    </center>
</body>

<script>
    document.getElementById("qx").onclick = function () {
        var checkboxs = document.getElementsByName("choice");
        for (var i = 0;i<checkboxs.length;i++){
            checkboxs[i].checked = true;
        }

    }

    document.getElementById("qbx").onclick = function () {
        var checkboxs = document.getElementsByName("choice");
        for (var i = 0;i<checkboxs.length;i++){
            checkboxs[i].checked = false;
        }

    }

    document.getElementById("fx").onclick = function () {
        var checkboxs = document.getElementsByName("choice");
        for (var i = 0;i<checkboxs.length;i++){
            checkboxs[i].checked = !checkboxs[i].checked;
        }

    }

    var trs = document.getElementsByTagName("tr");
    for (var i = 0;i<trs.length;i++){
            trs[i].onmouseover = function (ev) {
                this.style.background = "red"
            }

            trs[i].onmouseout = function (ev) {
                this.style.background = "white"

            }
    }
</script>
</html>
七.表单验证：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <form id="form">

        用户名：<input type="text" id="username" name="name" οnblur="checkName()">
        <span id="sp_name"></span>
        <br>
        <input type="submit">

    </form>

</body>

<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>
</html>
szmtjs10
关注
专栏目录
js各种实际场景的使用案例合集（全）
申小兮和林小兮的博客宝
07-31 1392
js各种实际场景的使用案例合集（全）
常用javascript案例大全
01-13
常用javascript案例大全，包括最常用的javascript应用案例
JavaScript 常用实例
wgchen
07-01 2096
JavaScript 常用实例...
JavaScript经典案例
runner_123的博客
04-17 3460
一、跨浏览器添加事件\移除 function addEvent(eventObj,tyoe,fn){ if(eventObj.addEventListener){ eventObj.addEventListener(type,fn,false) }else if(eventObj.attachEvent){ eventObj.attachEvent('o...
50个js经典案例
12-19
50个常用的js的案例，便于初学者更好的学习js
JavaScript 经典例子
han_dongwei的专栏
02-29 738
一、验证类 1、数字验证内 1.1 整数 1.2 大于0的整数 （用于传来的ID的验证) 1.3 负整数的验证 1.4 整数不能大于iMax 1.5 整数不能小于iMin 2、时间类 2.1 短时间，形如 (13:04:06) 2.2 短日期，形如 (2003-12-05) 2.3 长时间，形如 (2003-12-05 13:04:06) 2.4 只有年和月。形如(2003-
javascript的案例demo小练习
04-08
在"javascript的案例demo小练习"中，我们可以预期包含一系列的实例代码，旨在帮助初学者或复习者巩固JavaScript基础知识，理解如何使用JavaScript进行前端开发。这些练习可能涵盖了以下几个方面： 1. **变量与数据...
20个JavaScript经典案例
11-21
在本资源"20个JavaScript经典案例"中，我们将会探索一些常见的、实用的JavaScript编程技巧和应用场景，旨在帮助开发者提升技能并拓宽视野。下面，我们将详细探讨这些经典案例可能涵盖的知识点。 1. **DOM操作**：...
JavaScript语言案例.zip
04-25
总的来说，JavaScript是网页开发不可或缺的一部分，通过实践案例，如`JavaScript????\JavaScript????\、JavaScript????\????-chen.png`中的代码和示例，我们可以更好地理解和掌握这门语言，提升我们的前端开发技能。...
JavaScript小案例.zip
01-18
这个"JavaScript小案例.zip"文件包含三个实用的JavaScript功能示例，它们可以帮助初学者更好地理解和掌握JavaScript的基础以及实际应用。 第一个案例是“点击更换超链接”。在网页中，超链接通常用于引导用户访问...
JavaScript案例大全
03-19
3. **tab栏切换.html**：Tab切换是前端开发中的常见需求，通常使用JavaScript来控制不同内容的显示与隐藏。通过监听点击事件，修改CSS类以实现视觉切换，同时处理初始选中状态。 4. **作业模拟新浪下拉菜单.html**...
js常用效果实例
03-27
NULL 博文链接：https://jeemygrow.iteye.com/blog/1169767
JavaScript 实例大全（经典实例）
12-10
JavaScript实例大全，都是很经典的实例哦
javascript100个非常炫丽实用的案例
12-06
文件包中包含100个非常炫酷的js实例，而且在页面中也非常的实用。技术含量非常高。
javascript常用小案例
后知后觉
01-26 4067
常用javascript小案例 样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往下变大,在input框中加入这两个属性,然后就可以控制文本输入框的大小尺寸随着内容而变 onpropertychange=&quot;this.style.height=this.scroll...
JS常见案例总结(一)
.
04-06 798
JS常见案例总结（一）1、登录验证2、排他思想3、页面换肤4、表格隔行换色5、全选与反选6、tab栏切换7、简单发布留言8、三级联动9、时钟10、轮播图 1、登录验证 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp...
js常见的案例
A951299034的博客
10-12 414
for 循环 输出100-200之间的素数 // * 输出100-200之间所有的素数 只能被 1 和自身整除的数 // 思路：相反我们只需要找到那个能被其他某个数字整除的数 pass 就可以了 for (var i = 100; i <= 200; i++) { var age = true; // 假设他为一个素数 for (var j = 2; j < i; j++) { // j 为什么为2 因为这里我们先排除掉 被除数
Javascript之经典小案例
weixin_39843945的博客
01-15 604
（1）动态显示当前系统时间 <body> <p>当前时间：<span id="times"></span></p> </body> <script> function get(){ var date=new Date(); var d1=date.toLocaleString(); times.in...
JavaScript经典应用案例
houzeyu666的博客
10-11 6886
########JavaScript#######       ## JS注册表单的校验雏形   &lt;!-- 1. 需求:     1). 用户在注册的时候会输入一些信息， 但是用户输入的内容有可能不合法， 会导致服务器端压力过大;     2). 当用户填写信息之后， 对填写的信息进行校验（前端校验， 只能防君子不能防小人）     -后台校验: 也是需要校验的； 2. 需要...
javascript 练习案例
最新发布
09-19
JavaScript 练习案例通常涵盖了各种编程概念和技术，以下是几个常见的案例： 1. **基本语法练习**：例如创建变量、数据类型（字符串、数字、布尔值等）、条件语句（if...else、switch）、循环（for、while）以及函数的基本定义。 ```javascript // 基本变量声明 let name = "John"; var age; // 注意：var 和 let 的区别 // 条件判断 if (age > 18) { console.log("成年人"); } else { console.log("未成年人"); } // 循环示例 for (let i = 0; i < 5; i++) { console.log(i); } ``` 2. **数组和对象操作**：包括创建数组、添加元素、遍历数组，以及创建对象并访问属性。 ```javascript const fruits = ["apple", "banana", "orange"]; fruits.push("grape"); // 添加元素 let person = {name: "Alice", age: 30}; console.log(person.name); // 访问属性 ``` 3. **事件处理**：演示如何通过 DOM 操作和事件监听器处理用户交互。 ```javascript document.getElementById("myButton").addEventListener("click", function() { alert("按钮被点击了！"); }); ``` 4. **异步编程**：比如使用 Promise 或 async/await 解决 AJAX 请求。 ```javascript fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` 5. **函数式编程**：学习如何使用高阶函数、柯里化等技巧。 ```javascript function multiply(a, b) { return a * b; } // 使用高阶函数 function double(func) { return function(x) { return func(x) * 2; }; } const doubleMultiplication = double(multiply); doubleMultiplication(3, 4); // 输出 24 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值