JavaScript经典应用案例

最新推荐文章于 2024-06-14 20:39:31 发布
最新推荐文章于 2024-06-14 20:39:31 发布
阅读量6.8k 收藏 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
关注
  • 10
    点赞
  • 踩
  • 89
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS具体实例（一）
nabirt的博客
02-08 2989
JavaScript的一些实例记录
javaScript常用案例
张张张张张高高的博客
09-06 8620
前端页面开发之javaScript常用案例
JavaScript 实例大全（经典实例）
12-10
JavaScript实例大全，都是很经典的实例哦
前端三剑客之JavaScript基础入门
最新发布
qq_44624290的博客
06-14 397
建议学习完HTML和CSS后再来学习JavaScript，没有学习的小伙伴文章末尾有相关链接哦！
JavaScript经典案例大集合
03-07
该压缩包包含了8个经典案例文件，其中涉及到的案例多数比较经典，对于初学者来说，是熟悉掌握JS的好教程。
20个JavaScript开发案列（二）
终成大师的博客
02-19 1956
20个JavaScript开发案列(二)
js常见案例总结（一）
不甜呐的博客
09-04 527
1.变量的交换： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>变量的交换</title> </head> <body> <script type="text/javascript"> //变量交换的第一个思路：使用第三方的变量进行交换 var num1 = 10; var num2 =
javascript应用程序经典实例
07-22
资源名称：Javaｓｃｒｉｐｔ应用程序经典实例   内容简介： 懂得Javaｓｃｒｉｐｔ语法是一回事，能够创建有用的应用程序就是另一回事了。虽然市面上有成打的Javaｓｃｒｉｐｔ图书教你怎么做，但实际上...
Javascript经典实例
10-30
在这个“JavaScript经典实例”中，我们将探讨两个关键的JavaScript应用场景：创建弹出式窗口和创建折叠式导航菜单，以及如何利用JavaScript探测浏览器插件。 1. 创建弹出式窗口： 在网页开发中，弹出式窗口常用于...
JavaScript应用程序经典实例全书源码
01-31
此压缩包“JavaScript应用程序经典实例全书源码”很可能包含了各种JavaScript编程的经典案例，这些实例可以帮助我们深入理解和掌握JavaScript的核心概念和技术。 在JavaScript的世界里，有几个重要的知识点是每个...
20个JavaScript经典案例
11-21
在本资源"20个JavaScript经典案例"中，我们将会探索一些常见的、实用的JavaScript编程技巧和应用场景，旨在帮助开发者提升技能并拓宽视野。下面，我们将详细探讨这些经典案例可能涵盖的知识点。 1. **DOM操作**：...
600个javascript经典实例（内含源码）
11-12
600个javascript经典实例（内含源码）,非常适合新手使用
js经典案例
11-14
《javascript 经典案例》，中国电力出版社出版，李强译，2012年第一版
JavaScript应用程序经典实例配套例题
07-12
"JavaScript应用程序经典实例配套例题" 提供了一系列与JavaScript编程相关的实践案例，旨在帮助学习者通过实际操作加深对JavaScript的理解。这些例题与一本关于JavaScript应用程序的经典书籍相配合，使读者能够理论...
javascript 案例
m0_67195464的博客
04-06 1042
目录案例一：展示文字案例二：图片转换案例三：随机数 案例一：展示文字 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>展示文字</title> </head> <body onload="fa()"> <div id="da"> </div> </body> <script
javascript实例备忘
weixin_30952103的博客
02-16 241
一，javascript动态显示： 如显示效果上图所示： 如图显示鼠标放在百度谷歌等字样上市动态显示其内容明细：代码如下：<head><title></title><script type="text/javascript">functioninitEvent() {varlinks=document.getElementsB...
JavaScript经典案例
左岸
05-21 2883
1.关于JavaScript Function.call()函数function a() { console.log(this); } a.call(null); // window关于a.call(null); 根据EcmaScript 6 规范规定，如果第一个参数传入的对象调用者是null，或者undefined，call方法就把全局对象（浏览器上全局对象是window对象，Node.
几个简单的js实例
热门推荐
张海涛
11-25 1万+
鼠标悬停切换图片： function mouseOver() { document.getElementById('b1').src ="diaochan.jpg" } function mouseOut() { document.getElementById('b1').src ="noimage.gif" } " onmouseover="mous
JS的实用案例
weixin_48912846的博客
12-23 724
JS的实用案例 简单案例： ①算出一个4位数，每一位数之和的结果。 var num3 = 3597 var q = parseInt(num3 / 1000) var b = parseInt(num3 % 1000 / 100) var s = parseInt(num3 % 100 / 10) var g = num3 % 10 var s6 = q + b + s + g console.log(num3+“中，每一位数之和是：”+s6); ...
JavaScript语法基础与应用案例详解
"JavaScript技术文档PPT" JavaScript是一种轻量级的解释型编程语言，尤其在Web开发领域中被广泛使用，它使得HTML页面能够具备交互...理解并熟练运用这些概念，能够帮助开发者创建出交互性强、用户体验优秀的网页应用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值