JavaScript经典应用案例

最新推荐文章于 2024-09-24 18:05:34 发布
最新推荐文章于 2024-09-24 18:05:34 发布
阅读量6.9k 收藏 89
点赞数 10
分类专栏： 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/houzeyu666/article/details/82978872
版权

########JavaScript#######

 

 

 

## JS注册表单的校验雏形

 

<!--
1. 需求:
    1). 用户在注册的时候会输入一些信息， 但是用户输入的内容有可能不合法， 会导致服务器端压力过大;
    2). 当用户填写信息之后， 对填写的信息进行校验（前端校验， 只能防君子不能防小人）

    -后台校验: 也是需要校验的；

2. 需要掌握的技能:
    0). 如何在加载页面时执行指定函数?
    1). 如何获取指定元素对象?
    2). 如何弹出一个警告框?
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            // 获取输入用户名的标签对象
            var uEle = document.getElementById('username');
            alert(uEle);
            // 获取这个对象里面的值
            var uValue = uEle.value;
            // alert弹出一个警告框
            alert(uValue);
        }
    </script>
</head>
<body>

<form action="#" method="get">
    <!--
        get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
        post: 填写的信息不会在url里面显示
    -->
    <span>用户名:<input type="text" name="username" placeholder="username" id="username"></span><br>
    <span>密码:<input type="password" name="passwd" placeholder="passwd"></span><br>
    <input type="submit" value="注册">

</form>

</body>
</html>

 

 

 

## 注册表单校验用户名是否为空

 

<!--
实现步骤:
    1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
    2. 对这个事件绑定一个函数(执行的操作写在函数里面);
    3. 函数的核心功能: 校验用户名是否为空?
        1). 获取输入用户名标签提交的内容；
        2). if判断用户名是否为空?
        3). 如果数据合法， 继续执行， 提交表单；
        4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkForm() {
            var user = document.getElementById('username').value;
            if (user === '') {
                alert('用户名不能为空');
                return false;
            }
            var passwdLen = document.getElementById('passwd').value.length;
            if (passwdLen < 6) {
                alert('密码长度不能小于6位');
                return false;
            }
        }
    </script>
</head>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
    用户名:<input type="text" name="username" placeholder="username" id="username"><br>
    密码:<input type="password" name="passwd" placeholder="passwd" id="passwd"><br>
    <input type="submit" value="注册">
</form>
</body>
</html>

 

## 注意：

在JS里 ‘==’ // 两个等号做比较时， 会将字符串转换为整形进行比较; ' === ' 作比较时不同数据类型不能做比较

 

 

 

 

## 轮播图

 

## 实现图片的切换

 

分析：
    1. 确定事件类型为onclick事件；
    2. 并跟对应的函数changeImg绑定在一起；
    3. 实现函数功能；
      当点击下一页按钮之后， 修改img标签里面的src属性内容;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #pictures {
            width: 590px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
        }

        #adImg {
            text-align: center;
            width: 600px;
            height: 80px;
            margin: 0 auto;
        }
    </style>
    <script>
        // 定义一个变量，控制图片循环顺序
        var i = 1;

        function ChangeImg() {
            // 当点击下一页时，i+1 图片编程img2
            i += 1;
            // 修改img标签里面src的内容
            document.getElementById('img').src = 'img/img' + i + '.jpg';
            // 如果图片一轮轮播结束，从头开始
            if (i === 6) {
                i = 0;
            }
        }
    </script>
</head>
<body>
<div id="pictures"><img src="img/img7_ad.jpg" id="adImg">
    <img src="img/img1.jpg" id="img">
    <input type="button" value="下一页" onclick="ChangeImg()">
</div>
</body>
</html>

 

 

## 实现图片的轮播

## 每隔1s自动执行某一个函数
            setInterval('changeImg()', 1000);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #pictures {
            width: 590px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
        }

        #adImg {
            text-align: center;
            width: 600px;
            height: 80px;
            margin: 0 auto;
        }
    </style>
    <script>
        window.onload = function () {
            //每隔一秒执行函数
            setInterval('ChangeImg()', 1000);
        };
        // 定义一个变量，控制图片循环顺序
        var i = 1;

        function ChangeImg() {
            // 当点击下一页时，i+1 图片编程img2
            i += 1;
            // 修改img标签里面src的内容
            document.getElementById('img').src = 'img/img' + i + '.jpg';
            // 如果图片一轮轮播结束，从头开始
            if (i === 6) {
                i = 0;
            }
        }
    </script>
</head>
<body>
<div id="pictures"><img src="img/img7_ad.jpg" id="adImg">
    <img src="img/img1.jpg" id="img">
    <!--<input type="button" value="下一页" onclick="ChangeImg()">-->
</div>
</body>
</html>

 

Tips:

## 外部引入CSS样式与JS

Js的引入方式:
        - 内部引入: 直接在head标签里面的<script>写的内容;
        - 外部引入:<script src="js/main.js" ></script>

执行代码:

    <link href="#" rel="stylesheet">
    <script src="#"></script>


 

 



## 定时弹出广告
 

目标:
    实现网页定时弹出广告， 并定时取消弹出的广告;

步骤:
    1. 在页面设置一个隐藏的图片; style="display: none"
    2. 确定事件类型为onload， 为其绑定一个函数;
    3. 设置定时执行显示图片的函数showAd();
    4. 编写定时任务里面的函数showAd()----
            - 获取标签的样式display=‘block’;
            - 清除显示广告的定时任务;
            - 编写隐藏广告图片的定时任务;

    5. 实现定时任务里面的函数hiddenAd();
        - 获取标签的样式display=‘none’;
        - 清除隐藏广告的定时任务;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #pictures {
            width: 590px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
        }

        #adImg {
            text-align: center;
            width: 1190px;
            height: 80px;
            margin: 0 auto;
        }
    </style>
    <script>
        window.onload = function () {
            //每隔一秒执行函数
            setInterval('ChangeImg()', 1000);
            //每隔1s执行显示广告的函数;
            // 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
            //(http://www.w3school.com.cn/jsref/met_win_setinterval.asp)
            // 在js的函数里面。 变量名没有var时， 是一个全局变量;
            adtime = setInterval('showAd()', 1000);
        };
        // 定义一个变量，控制图片循环顺序
        var i = 1;

        function ChangeImg() {
            // 当点击下一页时，i+1 图片编程img2
            i += 1;
            // 修改img标签里面src的内容
            document.getElementById('img').src = 'img/img' + i + '.jpg';
            // 如果图片一轮轮播结束，从头开始
            if (i === 6) {
                i = 0;
            }
        }

        function showAd() {
            // 获取到广告图片对应的标签对象
            var adEle = document.getElementById('ad');
            //修改广告图片元素里面的style属性里面的display
            adEle.style.display = 'block';
            // 清除显示图片的定时操作；
            clearInterval(adtime);
            // 设置隐藏广告图片的定时任务；
            hiddentime = setInterval('hiddenAd()', 1000);
        }

        function hiddenAd() {
            var adEle = document.getElementById('ad');
            adEle.style.display = 'none';
            clearInterval(hiddentime);
        }
    </script>
</head>
<body>
<div id="pictures">
    <img src="img/img1.jpg" id="img">
</div>
<div id="adImg">
    <img src="img/img7_ad.jpg" id="ad"style="display: none">
</div>
</body>
</html>

 

 

 

## _用户注册

 

注意：

    1). 确定事件类型(onfocus-聚焦事件)， 并为其绑定一个函数;
    2). 确定事件类型(onblur-离焦事件)， 并为其绑定一个函数;

 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function showUserTip() {
            // 获取标签对象
            document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">用户名不能为空</b>';
        }

        function showPwdTip() {
            document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;">密码必须大于6位</b>';
        }

        function checkUser() {
            //1. 离焦时判断用户名是否为空?
            var name = document.getElementById('user').value;
            // 2. 如果为空， 右边来一个红色的提示;
            // 3. 如果不为空， 则取消所有提示;
            if (name === '') {
                document.getElementById('userTip').innerHTML = '<b style="color: #f10180">用户名不能为空</b>';
                return false;
            } else {
                document.getElementById('userTip').innerHTML = '<b style="color:  green"> ok </b>';
                return true;
            }
        }

        function checkPwd() {
            var pwdLen = document.getElementById('pwd').value.length;
            if (pwdLen < 6) {
                document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180">密码不能小于6位</b>';
                return false;
            } else {
                document.getElementById('pwdTip').innerHTML = '<b style="color:  green"> ok </b>';
                return true;
            }
        }
    </script>
</head>
<body>
<form action="#" method="get">
    <span><input type="text" name="username" id="user" placeholder="输入用户名" onfocus="showUserTip()"
                 onblur="checkUser()"></span><br>
    <span id="userTip"></span><br>
    <span><input type="password" name="password" id="pwd" placeholder="输入密码" onfocus="showPwdTip()"
                 onblur="checkPwd()"></span><br>
    <span id="pwdTip"></span><br>
    <input type="submit" value="注册">
</form>
</body>
</html>

 

 

 

 

## _表格的全选和全部选

 

需求:
    实现批量选中和批量不选中

步骤分析:
    1). 确定事件类型:鼠标单击单选按钮时(onclick事件)， 绑定一个函数；
    2). 编写函数checkAll()
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll() {
            var checkAllEle = document.getElementById('checkAll');
            //alert(checkAllEle);
            //判断该单选框是否被选中，
            //alert(checkAllEle.checked);
            // 对编号前面的复选框的状态进行判断;
            //      - 如果状态为选中， 则设置所有的单选框为选中状态;
            //      - 如果状态为没有选中， 则设置所有的单选框为没有选中状态;
            if (checkAllEle.checked) {
                var checkOnes = document.getElementsByName('checkOne');
                for (var i = 0; i < checkOnes.length; i++) {
                    checkOnes[i].checked = true;
                }
            } else {
                var checkOnes = document.getElementsByName('checkOne');
                for (var i = 0; i < checkOnes.length; i++) {
                    checkOnes[i].checked = false;
                }
            }
        }
    </script>
</head>
<body>
<table id="tab" style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
    <th style="text-align: center" colspan="5">
        <input type="button" value="添加">
        <input type="button" value="删除">
    </th>
    <tr>
        <th><input type="checkbox" id="checkAll" onclick="checkAll()">全选</th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>1</td>
        <td>kobe</td>
        <td>male</td>
        <td>40</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>2</td>
        <td>james</td>
        <td>male</td>
        <td>34</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>3</td>
        <td>curry</td>
        <td>male</td>
        <td>30</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>4</td>
        <td>durant</td>
        <td>male</td>
        <td>29</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>5</td>
        <td>hardan</td>
        <td>male</td>
        <td>28</td>
    </tr>
</table>
</body>
</html>

 

 

 

 

#######################################

houzeyu666
关注
专栏目录
JavaScript 实例大全（经典实例）
12-10
JavaScript实例大全，都是很经典的实例哦
javascript实例备忘
weixin_30952103的博客
02-16 262
一，javascript动态显示： 如显示效果上图所示： 如图显示鼠标放在百度谷歌等字样上市动态显示其内容明细：代码如下：<head><title></title><script type="text/javascript">functioninitEvent() {varlinks=document.getElementsB...
走过路过不要错过，爆肝1.5w字JavaScript入门，强烈推荐!!!
最新发布
普通程序猿的成长
09-24 1277
走过路过不要错过，爆肝1.5w字JavaScript入门，强烈推荐!!! 内包含从最基础的字符串到判断到循环到数组对象的全套内容
JavaScript经典案例
左岸
05-21 2932
1.关于JavaScript Function.call()函数function a() { console.log(this); } a.call(null); // window关于a.call(null); 根据EcmaScript 6 规范规定，如果第一个参数传入的对象调用者是null，或者undefined，call方法就把全局对象（浏览器上全局对象是window对象，Node.
50个js经典案例
12-19
50个常用的js的案例，便于初学者更好的学习js
js经典案例
11-14
《javascript 经典案例》，中国电力出版社出版，李强译，2012年第一版
javascript应用程序经典实例
07-22
资源名称：Javaｓｃｒｉｐｔ应用程序经典实例   内容简介： 懂得Javaｓｃｒｉｐｔ语法是一回事，能够创建有用的应用程序就是另一回事了。虽然市面上有成打的Javaｓｃｒｉｐｔ图书教你怎么做，但实际上...
JavaScript应用程序经典实例全书源码
01-31
此压缩包“JavaScript应用程序经典实例全书源码”很可能包含了各种JavaScript编程的经典案例，这些实例可以帮助我们深入理解和掌握JavaScript的核心概念和技术。 在JavaScript的世界里，有几个重要的知识点是每个...
javaScript经典实例
10-06
描述中提到“内容丰富”，意味着这个压缩包可能包含了各种类型的JavaScript应用场景，包括但不限于DOM操作、事件处理、动画效果、表单验证、AJAX请求、JSON处理、函数与闭包、对象与原型链、异步编程、模块化、以及...
Javascript经典实例
10-30
在这个“JavaScript经典实例”中，我们将探讨两个关键的JavaScript应用场景：创建弹出式窗口和创建折叠式导航菜单，以及如何利用JavaScript探测浏览器插件。 1. 创建弹出式窗口： 在网页开发中，弹出式窗口常用于...
JavaScript 经典实例收集整理
shwis的博客
12-08 1126
经典实例收集整理
javascript经典案例
01-19
php读取XML数据，javascript经典案例
Javascript应用的几个实例
weixin_33910385的博客
08-22 156
摘要 本文介绍了Javascript的几个编程实例。包括实现测试浏览器调用主页；如何利用Java Script实现修改时间的标记；用JavaScript自动显示banner。1.利用Javascript实现测试浏览器类型再调用相应的主页由于IE和Netscape的某些不兼容，使得主页制作出来后在两者中有较大差别，有的甚至不能使用。为便于管理，最佳的方法就是先测试浏览器类型，再调用相应的主页。它的做...
JavaScript 经典实例盘点（收藏向）
热门推荐
Silvia
07-03 1万+
快捷目录一、跨 浏 览 器 事 件跨浏览器添加事件跨浏览器移除事件跨浏览器阻止默认行为跨浏览器获取目标对象跨浏览器获取滚动条位置跨浏览器获取可视窗口大小二、js 对 象 冒 充三、js异步加载和同步加载四、js获取屏幕坐标五、PageX和clientX六、js 拖 拽 效 果七、js获取图片原始大小尺寸八、js循环遍历数组九、阻止表单重复提交十、字 符 串 部 分十一、Number和Math部分十二、数 组 部 分十三、Date日期时间部分十四、正 则 部 分十五、js判断传入参数是否为质数十六、js判断字
JS经典案例
me_never的博客
05-09 945
function Foo() { getName = function () { alert (1); }; return this; } Foo.getName = function () { alert (2);}; Foo.prototype.getName = function () { alert (3);}; var getName = function () { alert (4);}; function getName() { alert (5);} //答案： Foo.g
Js 经典案例
Ada_lake的博客
04-22 3258
1. 选项卡切换 思路 - 1. 查找到选项卡元素 - 2. 对选项卡里的每个button都设置监听事件 - 3. 找到事件发生的button - 4. 先清除选项卡内激活的按钮 - 5. 为现在触发的按钮添加active类 * 清除激活按钮的 active类 + 1. 通过active查找到 激活的按钮 + 2.判断如果存在这样的按钮 + 3. 将...
JS——经典案例
NanChen的博客
09-09 1007
JS的经典案例
js经典案例分享
贝la的博客
06-10 357
案例一：仿京东显示隐藏密码 案例二：密码框验证信息
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值