js相关操作

最新推荐文章于 2022-07-04 22:31:33 发布

Spashi

最新推荐文章于 2022-07-04 22:31:33 发布

阅读量268

点赞数

分类专栏： Notes

本文链接：https://blog.csdn.net/Spashi/article/details/81865260

版权

使用JS完成页面定时弹出广告

使用JS完成表格的隔行换色

使用JS完成复选框的全选效果

使用JS完成省市的联动效果

JS控制下拉列表左右选择

目标

掌握JS中的BOM对象
掌握JS中的常用事件
掌握JS中的常用DOM操作
了解JS中的内置对象

上一次内容进行复习:

CSS: 层叠样式表

主要作用: 美化页面, 将美化和HTML进行分离,提高代码复用性

选择器:

元素选择器: 元素的名称{}

类选择器:  . 开头

ID选择器:  #ID选择器



后代选择器:  选择器1 选择器2

子元素选择器: 选择器1 > 选择器2 

选择器分组: 选择器1,选择器2,选择器3{}

属性选择器: 选择器[属性的名称='属性的值']

伪类选择器:

浮动:

float 属性: left right

清除浮动:

clear 属性: both left right

盒子模型: 上右下左 padding 10px 20px 30px 40px 顺时针的方向

内边距: 控制的盒子内距离

边框: 盒子的边框

外边距: 控制盒子与盒子之间的距离

绝对定位: position : absolute; top: left

JS开发: 是一门脚本语言,由浏览器来解释执行,不需要经过编译

JS声明变量: var 变量的名字;

JS声明函数: function 函数的名称(参数的名字){}

JS开发的步骤:

1. 确定事件
2. 事件要触发函数,所以我们是要声明函数
3. 函数里面通常是去做一些交互才操作,  弹框, 修改页面内容,动态去添加一些东西

轮播图自动播放

需求:

有一组图片, 每隔3秒钟,就去切换一张,最终是一直在不停切换

技术分析:

切换图片:

每个三秒钟做一件事:

步骤分析:

1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
    1. 开启定时器: 执行切换图片的函数 changeImg()
4.  changeImg()
    1. 获得要切换图片的那个元素

完成页面定时弹出广告

1.1 需求分析

一般网页，当我们刚打开的时候，它会5秒之后，显示一个广告，让我们看5秒钟，然后他的广告就自动消失了！

1.2 技术分析

定时器
- setInterval : 每隔多少毫秒执行一次函数
- setTimeout: 多少毫秒之后执行一次函数
- clearInterval
- clearTimeout
显示广告 img.style.display = “block”
隐藏广告 img.style.display = “none”

1.3 步骤分析

确定事件: 页面加载完成的事件 onload
事件要触发函数: init()
init函数里面做一件事:
1. 启动一个定时器 : setTimeout()
2. 显示一个广告
  1. 再去开启一个定时5秒钟之后,关闭广告

1.4 代码实现

<script>

            function init(){
                setTimeout("showAD()",3000);
            }

            function showAD(){
                //首先要获取要操作的img
                var img = document.getElementById("img1");
                //显示广告
                img.style.display = "block";

                //再开启定时器,关闭广告
                setTimeout("hideAD()",3000);
            }

            function hideAD(){
                //首先要获取要操作的img
                var img = document.getElementById("img1");
                //隐藏广告
                img.style.display = "none";
            }
        </script>

1.5扩展

JS的引入方式
1. 完成完成表单的校验

2.1 需求分析

昨天我们做了一个简单的表单校验，每当用户输入出错的时候，我们是弹出了一个对话框，提示用户去修改。这样的用户体验效果非常不好好。我们今天就是需要来对他进行一个修改，当用户输入信息有问题的时候，我们就再输入框的后面给他一个友好提示。

2.2 技术分析

【HTML中innerHTML属性】

【JS中的常用事件】

onfocus 事件: 获得焦点事件

onblur : 失去焦点

onkeyup : 按键抬起事件

2.3 步骤分析

2.4 代码实现

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            引入外部的js文件
        -->
        <script type="text/javascript" src="../js/regutils.js" ></script>
        <script>
            /*
                1. 确定事件 : onfocus
                2. 事件要驱动函数
                3. 函数要干一些事情: 修改span的内容
            */
            function showTips(spanID,msg){
                //首先要获得要操作元素 span
                var span = document.getEle

最低0.47元/天解锁文章

Spashi

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js相关操作

使用JS完成页面定时弹出广告使用JS完成表格的隔行换色使用JS完成复选框的全选效果使用JS完成省市的联动效果JS控制下拉列表左右选择目标掌握JS中的BOM对象掌握JS中的常用事件掌握JS中的常用DOM操作了解JS中的内置对象上一次内容进行复习:CSS: 层叠样式表主要作用: 美化页面, 将美化和HTML进行分离,提高代码复用性选...
复制链接

扫一扫