03-javaScript

最新推荐文章于 2024-07-19 19:53:50 发布
最新推荐文章于 2024-07-19 19:53:50 发布
阅读量345 收藏
点赞数
分类专栏： html 文章标签： 浏览器 技术 对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tb625it/article/details/53415823
版权

1. 完成页面定时弹出广告

1.1 需求分析

​ 在我们打开网站的时候,过了3秒钟,弹出了一个广告,这个广告显示了3秒钟,消失了

1.2 技术分析

​ window对象是浏览器最顶层的对象 我们可以直接在我们的页面使用它里面的方法和属性

  1. 涉及到的事件 onload
  2. 过了3秒钟之后,做一件事 setTimeout()
  3. 弹出广告, 控制元素的显示和隐藏

【JS的定时操作】

setInterval()按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()在指定的毫秒数后调用函数或计算表达式。
clearInterval()取消由 setInterval() 设置的 timeout。
clearTimeout()取消由 setTimeout() 方法设置的 timeout。

【HTML中的显示与隐藏】

css属性: display
    显示: block
    隐藏: none;

1.3 步骤分析

  1. 确定事件 onload
  2. 事件通常都会触发一个函数
    1. 启动定时器,3秒之后显示广告
      1. 首先都获取广告所在的img
      2. 修改它的属性值 style.display=”block”

取消定时器

clearInterval()取消由 setInterval() 设置的 timeout。
clearTimeout()取消由 setTimeout() 方法设置的 timeout。

1.4 代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--script标签-->
        <script>
            var id_Interval;
            function showAd(){
                //获取要操作的元素
                var ad = document.getElementById("ad"); //<img>
                //是不是要操作元素里面的显示
//              alert(ad.style);
                ad.style.display="block";

                console.log("显示方法被调用了...")
//              setTimeout("hideAd()",3000);

/************************************************************************/

                //这里需要想办法取消定时器
                clearInterval(id_Interval);
                //让广告显示3秒钟之后再去执行
                setTimeout("hideAd()",3000); 
            }
            function hideAd(){
                var ad = document.getElementById("ad"); //<img>
                //是不是要操作元素里面的显示
//              alert(ad.style);
                ad.style.display="none";
            }


            window.onload = function(){
                //三秒之后显示广告
//              setTimeout("showAd()",3000);
                //setTimeout(showAd,3000); //传入的是方法的应用
            //  setTimeout(showAd(),30000); // 这个调用有问题


                id_Interval = setInterval("showAd()",3000); //启动了一个定时器


            }

        </script>
    </head>
    <body>
        <img id="ad" style="display: none; width: 100%;" src="../products/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" />
    </body>
</html>
BOM: 浏览器对象模型

​ window : 浏览器最顶层的对象,它的方法和属性可以直接拿来使用

​ setInterval

​ setTimeout

​ clearInterval

​ clearTimeout

​ navigator: 获取浏览器的一些信息

​ history: 操作的历史记录

​ location: 浏览器地址栏

​ screen; 屏幕

​ 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>

            alert(window.screenLeft );
            var flag = window.confirm("您确定要退出我们的网站吗?");
//          alert(flag);

//          window.prompt("ni hao:")

            //浏览信息
        /*  alert(navigator.appCodeName);
            alert(navigator.appName);

            //screen
            alert(screen.width);
            alert(screen.height);*/

            function goto(){
                location.href="http://www.baidu.com";
            }

        </script>
    </head>
    <body>
        <input type="button" onclick="goto()" value="跳转去百度"/>
    </body>
</html>

2. 完成完成表单的校验

2.1 需求分析

当用户输入的时候,我们需要对用户输入的内容进行表单的验证,这样可以减轻对服务器的压力

2.2 技术分析

【HTML中innerHTML属性】

通过查找手册,发现Element元素有一个innnerHTML属性,这个属性可以填写一段html代码

innerHTML = "<font color='red'>这是一段测试的文本内容</font>"

【JS中的常用事件】

onfocus() : 获取到焦点

onblur(): 失去焦点

onkeyup(): 当用户输入完成之后,按键弹起触发的事件.

2.3 步骤分析

  1. 确认事件 onsubmit 并且注意οnsubmit=”return checkForm()”

  2. 实现checkForm这个方法

    1. 对用户名做非空判断,
    2. 对用户名进行输入长度判断
    3. 输入的密码长度不能少于8位
    4. 两次输入的密码必须一样
    5. 邮箱格式需要正确sdfasdf@qq.com

  3. 当用户输入有问题的时候, 需要在后面给出友好提示

    1. 修改span的内容 使用innerHTML

      ​

2.4 代码实现

<script>

            /*
             1. 确认事件 onsubmit  并且注意onsubmit="return checkForm()"
                2. 实现checkForm这个方法
                   1. 对用户名做非空判断,
                   2. 对用户名进行输入长度判断
                   3. 输入的密码长度不能少于8位
                   4. 两次输入的密码必须一样
                   5. 邮箱格式需要正确sdfasdf@qq.com.cn
                3.  当用户输入有问题的时候, 需要在后面给出友好提示
                   1. 修改span的内容 使用innerHTML

             */
            function showTips(){
                var span = document.getElementById("spanId");
                span.innerHTML = "<font color='red'>用户名不能为空,长度须大于6</font>"
            }

            function checkUsername(){

                //1. 对用户名做非空判断,
                //先得获取用户输入
                var username = document.getElementById("username");
                //alert(username.value);
                var uValue = username.value;
                //类型的转换
//              var i = 123;
//              alert(i.toString());
//              var j = "hello world";
//              var m = j.substring(0,6);
//              alert(m);

                //对用户名进行输入长度判断
                if(uValue == "" || uValue.length < 6){
                    //在后面的span中填入给用户温馨提示
                    /*
                      1.首先获取span
                      2. 修改span的innerHTML属性  
                     */
                    var span = document.getElementById("spanId");
                    span.innerHTML = "<font color='red'>用户名不合法</font>"

                    return false;
                }else{
                    var span = document.getElementById("spanId");
                    span.innerHTML = "<font color='red'>恭喜您,合法</font>"
                }

            }

            function checkForm(){
                //1. 对用户名做非空判断,
                //先得获取用户输入
                var username = document.getElementById("username");
                //alert(username.value);
                var uValue = username.value;
                //类型的转换
//              var i = 123;
//              alert(i.toString());
//              var j = "hello world";
//              var m = j.substring(0,6);
//              alert(m);

                //对用户名进行输入长度判断
                if(uValue == "" || uValue.length < 6){
                    //在后面的span中填入给用户温馨提示
                    /*
                      1.首先获取span
                      2. 修改span的innerHTML属性  
                     */
                    var span = document.getElementById("spanId");
                    span.innerHTML = "<font color='red'>用户名不合法</font>"

                    return false;
                }
                /*
                    输入的密码长度不能少于8位
                    先获取到密码框输入的内容
                    判断它的长度是否小于8
                   4. 两次输入的密码必须一样
                    获取重复密码框的内容
                 * */
                var pValue = document.getElementById("password").value;
                var rePValue = document.getElementById("repassword").value;

                if(pValue.length < 8){
                    var span = document.getElementById("password_spanId");
                    span.innerHTML = "<font color='red'>密码长度不够8位</font>"
                    return false;
                }else{
                    var span = document.getElementById("password_spanId");
                    span.innerHTML="";
                }

                if(pValue != rePValue){
                    var span = document.getElementById("repassword_spanId");
                    span.innerHTML = "<font color='red'>两次输入密码不一致</font>"
                    return false;
                }else{
                    var span = document.getElementById("repassword_spanId");
                    span.innerHTML = ""
                }
                //邮箱校验 正则表达式
                var email = document.getElementById("email").value;
                //正则表达式
                /*var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; 
                if(! reg.test(email)){
                    alert("邮箱表达式有问题")   
                    return false;
                }*/
                if(!checkEmail(email)){
                    return false;   
                }


                return true;
            }
        </script>

3. 表格隔行换色

3.1 需求分析

3.2 技术分析

  1. 如何来获取表格中所有的行
  2. 如何来修改表格中的颜色

3.3 步骤分析

3.4 代码实现

        <script>
        /*
         1. 确定事件,文档加载onload
         2. 事件要触发函数
                获取到表格
                获取到所有的行
                    然后对奇数行改变 red
                    对偶数行改变成黄色
         */
        window.onload = function(){
            var table1 = document.getElementById("table1");
//          var rows = table1.rows;
            //
            var rows = table1.tBodies[0].rows
            //alert(rows);
            for(var i = 0 ; i< rows.length; i++){
                var row = rows[i];
                if(i%2 == 0){
                    row.style.backgroundColor = "yellow";
                }else{
                    row.style.backgroundColor = "red";
                }
            }

        }

    </script>

4. 复选框的全选和全不选

4.1 需求分析

4.2 技术分析

​ 【HTML中checked属性】

找到checkbox中的checked中的属性

4.3 步骤分析

/*
                1.确定事件:onclick 
                2.实现函数也声明
                    获得checkbox
                    获取当前点击之后的状态checked 还是非
            */
        function selectAll(){
            var ckall = document.getElementById("ckall")
//          alert(ckall.checked);
            var checkedFlag = ckall.checked;
            var ckones = document.getElementsByName("ckone");


            for (var i=0; i<ckones.length; i++) {
                var ckone = ckones[i];
                ckone.checked = checkedFlag;
            }
        }

5. 省市联动效果

5.1 需求分析

5.2 技术分析

【HTML中的DOM操作】

CRUD,增删改查

DOM: Document Object Model 文档对象模型

getElementById()返回带有指定 ID 的元素。
getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。
appendChild()把新的子节点添加到指定节点。
removeChild()删除子节点。
replaceChild()替换子节点。
insertBefore()在指定的子节点前面插入新的子节点。
createAttribute()创建属性节点。
createElement()创建元素节点。
createTextNode()创建文本节点。
getAttribute()返回指定的属性值。
setAttribute()把指定属性设置或修改为指定的值。

【JS中的数组对象】

            var cities = new Array(4);
            cities[0] = new Array("深圳市","东莞市","广州市","佛山市"); //广东省
            cities[1] = new Array("哈尔滨","齐齐哈尔市","漠河"); //黑龙江
            cities[2] = new Array("黄石市","黄冈市","武汉市","孝感市"); //湖北省
            cities[3] = new Array("拉萨市","阿里地区","八一","塔尔村"); //西藏

5.3 步骤分析

5.4 代码实现

<script>
            /*
             先准备数据
             * */
            var cities = new Array(4);
            cities[0] = new Array("深圳市","东莞市","广州市","佛山市"); //广东省
            cities[1] = new Array("哈尔滨","齐齐哈尔市","漠河"); //黑龙江
            cities[2] = new Array("黄石市","黄冈市","武汉市","孝感市"); //湖北省
            cities[3] = new Array("拉萨市","阿里地区","八一","塔尔村"); //西藏


            /*
             首先还是确认事件onchange
             事件对应所要触发的方法 changeProvince()
             */
            function changeProvince(){
                //得到要操作的select
                var selectProvince = document.getElementById("selectProvince");
                //判断它当前被选中的值
                var index = selectProvince.value;
                //从数组中去找到对应的城市数组
                var selectCities = cities[index];


                //找到放置城市信息的select
                var selectCity = document.getElementById("selectCity");

                //清空select中的option
                selectCity.options.length = 0;
                //遍历是城市信息数组
                for(var i = 0 ; i<selectCities.length; i++){
                    var citiName = selectCities[i];
                    //alert(citiName);//
                    //创建子节点
                    var option1 = document.createElement("option");//<option></option>

                    //创建文本节点
                    var textNode = document.createTextNode(citiName);
                    //将文本节点添加到option中
                    option1.appendChild(textNode); // <option>东莞市</option>

                    //将封装好的option添加到selectCity中
                    selectCity.appendChild(option1);
                }                               
            }
        </script>

6. 使用JS控制下拉列表左右选择

6.1 需求分析:

6.2 步骤分析:

6.3 代码实现:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script>
            /*
                1.确认事件  onclick
                2.事件要触发函数: selectOne
                    获取选中的商品
                    将选中的商品添加到左边
            */
            function selectOne(){
                //获取选中的商品
                    //首先要找到select
                var selectRight = document.getElementById("selectRight");
                //找到左边的select
                var selectLeft = document.getElementById("selectLeft");

                //得到所有的options
                var options = selectRight.options;
                for (var i = options.length - 1; i >= 0; i--) {
                    var oneOption = options[i];
                    //找到被选中的项
                    if(oneOption.selected){
                        //alert(oneOption.value);
                        //将这个选中的option添加到左边
                        selectLeft.appendChild(oneOption);
//                      break;
                    }
                }
            }


            function selectAll(){
                //获取选中的商品
                    //首先要找到select
                var selectRight = document.getElementById("selectRight");
                //找到左边的select
                var selectLeft = document.getElementById("selectLeft");

                //得到所有的options
                var options = selectRight.options;
                for (var i = 0; i < options.length; i++) {
                    var oneOption = options[i];
                    //找到被选中的项
//                  if(oneOption.selected){
                        //alert(oneOption.value);
                        //将这个选中的option添加到左边
                        selectLeft.appendChild(oneOption);
//                      break;
                    i--;
//                  }
                }
            }
        </script>
    </head>
    <body>

        <table width="450px" border="1px">
            <tr>
                <td>分类名称:</td>
                <td>
                    <input type="text" value="手机数码" />
                </td>
            </tr>
            <tr>
                <td>分类描述:</td>
                <td>
                    <input type="text" value="这里头满满的都是肾" />
                </td>
            </tr>
            <tr>
                <td>分类商品:</td>
                <td>
                    <span style="float: left;">
                        已有商品:<br />
                        <select multiple="multiple" id="selectLeft">
                            <option>肾6</option>
                            <option>肾7</option>
                            <option>肾8</option>
                            <option>锤子</option>
                        </select>
                        <br />
                        <a href="#">&gt;&gt;</a><br />
                        <a href="#">&gt;&gt;&gt;</a>
                    </span>

                    <span style="float: right;border: 1px solid red;" >
                        未有商品:<br />
                        <select multiple="multiple" id="selectRight" ondblclick="selectOne()">
                            <option>三星note7</option>
                            <option>小米Mix</option>
                            <option>华为meta9</option>
                            <option>波导手机</option>
                        </select>
                        <br />
                        <a href="#" onclick="selectOne()">&lt;&lt;</a><br />
                        <a href="#" onclick="selectAll()">&lt;&lt;&lt;</a>
                    </span>
                </td>
            </tr>
            <tr>

                <td colspan="2">
                    <input type="submit" value="提交" />
                </td>
            </tr>
        </table>

    </body>
</html>
tb625it
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web前端学习-day03-JavaScript
Javaw1212的博客
08-26 3961
交互性强: 由于JS语言是嵌入到HTML页面中undefined最终执行在客户端的浏览器中的语言undefined和用户是直接接触undefined Java语言是运行在服务器的语言undefined 用户需要进行交互的话必须通过网络才可以undefined所以JS语言的交互性会更强.==和===区别: ==先统一等号两边变量的类型 再比较值undefined ===先比较两个变量的类型undefined类型一致后再比较值. "666"==666 true "666"===666 false。...
Practica03-Javascript
03-17
Practica03-Javascript Nombre：布莱恩·门德斯（Bryan Mendez） OBJETIVO •Internet的组织者和主要管理者•Internet上的Dissñaradecuadamente elementosgráficos。 •实际情况。 一种。 验证人资格，恩塞普尔...
03-JavaScript
Xstruggle的博客
04-23 1189
2021-03-23-JavaScript闭包
Be Smart
03-23 1327
layout: post title: “JavaScript闭包” categories: [原理定义] tags: [JavaScript] 今天系统的学习了一遍JavaScript教程，发现一个很有意思的js用法------闭包。 对于闭包的理解 我刚开始也很懵，其实就是一个大函数里面包了一个函数，外部的大函数的参数是里面的函数，返回值也是里面的函数值，那么通过这种方式，就可以将里面那个函数的变量变为外部大函数的私有变量，可谓是一个很骚的操作哈哈哈，也可以说是个bug。 评论说Js之父发明的时候.
JavaScript-day03
2201_75449897的博客
07-19 195
【代码】JavaScript-day03。
node内存泄漏耗尽： FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript
qq_42351675的博客
07-13 2万+
执行npm命令报错：FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of me ​ 解决办法：在package.json里添加 ​
03 JavaScript学习：浏览器中执行 JavaScript
热门推荐
百锦再的博客
04-19 6万+
我比较习惯Chrome浏览器。Chrome 是由 Google 开发的免费网页浏览器，调试代码非常方便。Chrome 官网地址：https://www.google.com/intl/zh-CN/chrome/。
03 day5--javascript笔记pink老师-提高篇之ES6+，重中之重
小女不才
08-31 1804
思维导图： 1. 严格模式 JavaScript 除了提供正常模式外，还提供了严格模式 ES5 的严格模式是采用具有限制性 JavaScript 变体的一种方式，即在严格的条件下运行 JS 代码 严格模式在IE10 以上版本的浏览器才会被支持，旧版本浏览器会被忽略 严格模式对正常的JavaScript语义做了一些更改： 消除了Javascript 语法的一些不合理、不严谨之处，减少了一些怪异行为 消除代码运行的一些不安全之处，保证代码运行的安全 提高编译器效率，增加运行速度 禁用了在 ECMAScri
2022-03-07 JavaScript 中返回值为 undefined 的情况
weixin_44295310的博客
03-09 1083
访问声明，但是没有初始化的变量 访问不存在的属性 访问函数的参数没有被显式地传递值 访问任何被设置为 undefined 值的变量 没有定义 return 的函数隐式返回 函数 return 没有显式地返回任何内容 ...
JavaScript-时区
MountGao的博客
08-13 3284
JavaScript-时区 简介 时区是地球上的区域使用同一个时间定义。以前，人们通过观察太阳的位置（时角）决定时间，这就使得不同经度的地方的时间有所不同（地方时）。1863年，首次使用时区的概念。时区通过设立一个区域的标准时间部分地解决了这个问题。 世界各国位于地球不同位置上，因此不同国家，特别是东西跨度大的国家日出、日落时间必定有所偏差。这些偏差就是所谓的时差。 历史 在农业社会，世界各地一般采用各自的地方时。十九世纪随着长途铁路运输的发展，1870年代加拿大铁路工程师弗莱明首次提出全世界按统一标准
03-javascript-homework
03-07
03-javascript-家庭作业 作业3 我的工作描述： 打开页面时，将显示一个屏幕和按钮以生成密码。 单击“生成按钮”时，将提示您确定密码长度。 如果用户没有选择8到128个字符之间的长度，则会遇到困难。 然后，提示...
03-JavaScript-Password-Generator
03-08
9. **版本控制**：由于文件名为`03-JavaScript-Password-Generator-main`，这可能表明使用了版本控制系统（如Git），文件名中的`main`可能是默认分支。 10. **学习资源**：这个项目可以作为学习JavaScript和Web开发...
NET语言程序设计课件-第2章 Visual C#.NET语法基础.ppt
08-08
Visual C# .NET是一门面向对象的程序设计语言，是当前流行的.NET系列的语言。 本课程以Visual Studio为程序设计环境，对C#进行了全面阐述。 本电子课件适用于课程讲解或者课程分析参考使用。
[毕业设计]PHP图书借阅与归还管理系统(源代码+论文).zip
08-08
[毕业设计]PHP图书借阅与归还管理系统(源代码+论文)
ssm_012_mysql宝康药房销售管理系统.zip
08-08
随着我国市场经济的蓬勃发展和人们对医药产品需求的迅速增加，医药销售行业正处于一个高速发展的时期。行业的快速发展必然导致竞争的加剧，面对药品销售业日益严酷的竟争现实，加强管理、提高工作效率和改善服务质量成了急待解决的问题。而解决这些问题的关键措施之一就是利用计算机等现代信息技术，建立实用、先进、高效的药房销售管理系统，引进创新的经营机制，实现药品销售过程的全面信息化管理，以适应企业生存和发展的新形势。因此，开发一个宝康药房销售管理系统是十分必要的。 根据需求，确定系统采用JSP技术，SSM框架，JAVA作为编程语言，MySQL作为数据库。整个系统要操作方便、易于维护、灵活实用。主要实现了频道维护、新闻维护、药品维护、订单维护、系统管理等功能。
excel基本操作.pptx
08-08
excel基本操作.pptx
[毕业设计]PHP物业管理系统网站开发(源代码+论文).zip
08-08
[毕业设计]PHP物业管理系统网站开发(源代码+论文)
程序开发编程重要培训资料分享2程序开发编程开发技术资料.zip
最新发布
08-08
程序开发编程重要培训资料分享2程序开发编程开发技术资料.zip
JavaScript基础教程：第03天笔记-核心概念与循环
"JavaScript基础知识讲解" 在JavaScript中，`for`循环是一种常见的控制流程语句，用于重复执行一段代码，直到满足特定条件为止。在提供的笔记中，提到了多个与`for`循环相关的知识点，让我们逐一深入理解。 1. **...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值