首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ajax提交等待服务器响应友好提示信息的实现

虽然,我不能改变客观环境因素带来的长响应时间,但我可以告诉用户系统正在做什么,他们感受到,系统很在乎他们的感受,并愿意亲切地和他们交流的,不是传统的软件那样,死板、霸道、冷冰冰的,好了,不多说大道理了...执行loginWaiting方法,这个方法是本篇博客的关键,也就是开始向用户显示友好的登录信息的,在此之后,马上执行checkLogin方法,向服务器提交登录验证请求,本来,这两个动作应该是严格意义的同时执行的...,但JAVASCRIPT是单线程的,所以,唯有偏心一下了,呵呵,来看看loginWaiting方法做了什么吧: /** *已经发送登录请求,等等服务器响应过程的一些处理(包括禁用登录按钮,更换登录按钮背景图片...(也就是当这个按钮不可用的状态时给按钮安排的背景图片),这样子两张图片合成为一张有什么好处呢?...第二点,也就是最关键的地方在于,浏览器并不是一次性将所有页面用到的图片加载回来的,而是展示哪张时加载哪张,如果分开两张图片的话,当我们切换按钮背景图片的时候,浏览器加载稍慢的话,会导致这个切换的过程

2.5K30

八种创建等高列布局【出自w3c】

高度相等列Web页面设计永远是一个网页设计师的需求。如果所有列都有相同的背景色,高度相等还是不相等都无关紧要,因为你只要在这些列的父元素设置一个背景色就可以了。...但是流体布局要用CSS实现多列等高的设计那就不是那么容易的事情,因为我们没有办法使用背景图片来实现多列等高的假像了,那么是不是就没有办法实现了呢?...一、假等高列 这种方法是我们实现等高列最早使用的一种方法,就是使用背景图片列的父元素使用这个背景图进行Y轴的铺放,从而实现一种等高列的假像: Html Markup <div class=...三、给容器div使用单独的背景色(流体布局) 这种布局可以说是就是第二种布局方法,只是这里是一种多列的流体等高列的布局方法。...下面我们一起来看三列的实现过程: 上图展示了,我们有三列,并且也说过了,这三列内容都放在了三个容器的div,我们每一列的背景色不是放在内容列,而是放置容器,现在我们需要通过对容器进行相对定位,

1.3K40
您找到你想要的搜索结果了吗?
是的
没有找到

2.语义化-HTML进阶

1.第二次学习的感受 我最开始在学习HTML,和大多数初学者一样觉得这也太简单了,觉得没有多少东西,只要记住这些个标签就可以了。当我第二次学习时才发现,HTML并没有我想象的那么简单。...学习HTML并不是看你学了多少标签,而是在于在你需要的地方能否用到正确的语义化标签。标签用对地方,才是学习HTML的目的所在。...这三大元素,HTML才是最重要的,CSS、JavaScript只是用来修饰的,这就好比盖房子,房子再好看,如果结构不稳是会崩塌的 4.语义化优点 编写一个语义良好的页面实际开发中极其重要。...4.不要用div来代替h1~h6 从语义讲,页面的标题应该使用h1~h6标签,不要使用 div 来代替。...-- 1.第1组表单,只能点击单选框才能选中单选框,点击说明文字是不能选中的。 2.第2组表单,点击单选框能选中单选框,点击说明文字也能选中。

1.2K30

全栈之前端 | 9.CSS3基础知识之图像元素样式学习

如果你一张图片放在一个盒子里,而这张图片的原始长和宽比盒子的小或大,那么这张图要么缩在盒子里,要么就从盒子里面溢出,此时便需要我们使用width/height、max-width/max-height...值,它可以图像充满盒子,但是不会维持比例。...background-size: auto auto */ background-size: 50%, 25%, 25% background-size: 6px, auto, contain 备注:单张图片的背景大小可以使用以下三种方法一种来规定...scroll 相对于元素本身固定,不是随着它的内容滚动。...其效果类似于背景层(用前景层)打出一片发散的聚光灯。 : 最终颜色是 两种颜色较浅的颜色 减去 两种颜色较深的颜色 得到的结果。黑色层不会造成变化,白色层会反转另一层的颜色。

16010

css属性及定位操作

background-image: url('1.jpg'); 背景图片的特殊示例:   需求介绍:使用背景图片的一个常见案例就是很多网站会把很多小图标放在一张图片,然后根据位置去显示图片。...值 意义 display:”none” HTML文档中元素存在,但是浏览器不显示。一般用于配合JavaScript代码使用。...左的顺序作用于四边; 浮动(float)属性 CSS ,任何元素都可以浮动。...允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 但是需要注意的是:clear属性只会对自身起作用,不会影响其他元素。...2、clear: left;对自身起作用,一旦左边有浮动元素,即切换到下一行来保证左边元素不是浮动的,依据这一点解决父级塌陷问题。 overflow溢出属性 值 描述 visible 默认值。

2.4K50

【Web技术】610- Web的图片技巧

CSS背景图片不是这样的。检查该元素时,要先检查该元素,然后DevTools打开URL里面的链接,才可以下载一个正在添加CSS的图片。...SVG SVG被认为是一种图像,它最大的功能是不影响质量的前提下进行缩放。此外,SVG,我们可以嵌入JPG、PNG或SVG图像。请看下面的HTML。...开始解决之前,我们先问一下自己这个背景的性质。下面是一些入门问题。 对于用户来说,这个图片是重要的,还是可以跳过? 我们是否需要在所有的视口大小都要有它?...JavaScript动态改变背景图片。...设置一个10%的黑色边框,我们可以确保边框与暗色图像融合,只有图像颜色较浅的情况下,边框才会显现出来。

2.9K30

2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

ajax(异步javascript xml) 能够刷新局部网页数据不是重新加载整个网页。 如何使用ajax?...setState方法更新状态;vue,state对象不是必须的,数据由data属性vue对象管理 26.什么是mvvm mvc是什么区别 原理 一、MVC(Model-View-Controller...由于Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以闭包简单理解成“定义一个函数内部的函数”。 所以,本质,闭包就是将函数内部和函数外部连接起来的一座桥梁。...但如果我事件注册一个大范围的div(假设所有的按钮都在这个div),那么我只要注册一次事件,就可以处理所有按钮(只要按钮包含在上述div)事件的响应了 53:CSS3新增了很多的属性,下面一起来分析一下新增的一些属性... CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。 CSS3 可以规定背景图片的尺寸,这就允许我们不同的环境重复使用背景图片。您能够以像素或百分比规定尺寸。

1.9K20

CSS征途之Background点滴

(2) 文本替换 在网页,对于字体的选择是相当有限的。可以使用 sIFR 之类的工具来定制字体,但是这需要用户启用 JavaScript 。...属性值如下: (1)background-clip: border;背景border边框下开始显示 (2)background-clip: padding;背景padding下开始显示,不是border...边框下开始 (3)background-clip: content;背景在内容区域下开始显示,不是border边框下开始或padding下开始。...Background之背景图片拉伸填充避免重复显示 如何背景图片拉伸填充,这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。...比如一个容器(body,div,span)设定一个背景。这个背景的长宽值css2.1之前是不能被修改的。

1.5K40

​探秘 Web 水印技术

全页面水印 照葫芦画瓢,如果要给整个 Web 页面加上水印,是不是给页面的 body 元素设置背景图片平铺展示就可以了呢?...不妨换个角度思考,有没有办法文字不转成图片就可以用作 background-image 属性的值呢?这样就可以利用 background-repeat 实现平铺效果了。...为了提高 web 水印的隐蔽性,同时避免受外部代码影响,从而在一定程度上防止篡改,可以考虑水印元素放在 Shadow DOM 。 来看下 Shadow DOM 的基本用法。...它接受一个配置对象作为参数,该对象有一个 mode 属性,值可以是 open 或者 closed 。open 表示可以通过页面内的 JavaScript 方法来获取 Shadow DOM。...频域水印 将数字图像用一个矩阵来表示,是图像的空间域表示方法,LSB 就是图像的空间域隐藏信息,鲁棒性较差。而在图像信号的频域(变换域)隐藏信息要比空间域中隐藏信息具有更好的鲁棒性。

2K22

前端运用图片的技巧总结

CSS背景图片不是这样的。检查该元素时,要先检查该元素,然后DevTools打开URL里面的链接,才可以下载一个正在添加CSS的图片。...SVG SVG被认为是一种图像,它最大的功能是不影响质量的前提下进行缩放。此外,SVG,我们可以嵌入JPG、PNG或SVG图像。请看下面的HTML。...开始解决之前,我们先问一下自己这个背景的性质。下面是一些入门问题。 对于用户来说,这个图片是重要的,还是可以跳过? 我们是否需要在所有的视口大小都要有它?...JavaScript动态改变背景图片。...设置一个10%的黑色边框,我们可以确保边框与暗色图像融合,只有图像颜色较浅的情况下,边框才会显现出来。

2.6K20

哪些你知道或不知道的css,在这里或许都齐全

我们的时代应该是去创造不是模仿。回到学校之后,我开始我学习的新旅程;读一本好书亦如交一个有趣的朋友。...半透明边框 实现半透明边框可以有很多的实现方法,比如:伪元素和定位相结合,多层div包裹和定位相结合......平行四边形 有没有办法只容器的形状倾斜保持其内容不变呢?或许你会想到嵌套两层元素,外层skew(),对内容应用一次反相skew变形,从而抵消变形的效果。...缓动效果 给过渡和动画加上缓动效果是一种流行的表现手法,可以界面显得更加生动和真实,但是现实世界,物体从a到b点的移动往往不是 完全匀速的,因此我们需要对动画效果加以调整,使得更加逼真 解决方案:...,我们可以为他添加生成性内容(伪元素),并基于复选框的状态来为其设置样式,然后真正的复选框隐藏起来(但不能把它从tab键切换焦点的队列完全删除),再生成性内容美化一番,用来顶替原来的复选框!

1.4K20

哪些你知道或不知道的css,在这里或许都齐全 css编码技巧 css小技巧

我们的时代应该是去创造不是模仿。回到学校之后,我开始我学习的新旅程;读一本好书亦如交一个有趣的朋友。...半透明边框 实现半透明边框可以有很多的实现方法,比如:伪元素和定位相结合,多层div包裹和定位相结合......平行四边形 有没有办法只容器的形状倾斜保持其内容不变呢?或许你会想到嵌套两层元素,外层skew(),对内容应用一次反相skew变形,从而抵消变形的效果。...缓动效果 给过渡和动画加上缓动效果是一种流行的表现手法,可以界面显得更加生动和真实,但是现实世界,物体从a到b点的移动往往不是 完全匀速的,因此我们需要对动画效果加以调整,使得更加逼真 解决方案:...,我们可以为他添加生成性内容(伪元素),并基于复选框的状态来为其设置样式,然后真正的复选框隐藏起来(但不能把它从tab键切换焦点的队列完全删除),再生成性内容美化一番,用来顶替原来的复选框!

1.6K10

html网页详细代码「建议收藏」

window.opener.location.reload() 26.如何设定打开页面的大小 打开页面的位置 27.页面如何加入不是满铺的背景图片,拉动页面时背景图不动...Dreamweaver4CSS样式面板: 按CTR+SHIFT+E--出现样式表对话框,点击NEW,出现编辑对话框,左边最后一项extensions-cursor 选择你要改的指针形式就可以了,然后你要想改变的地方运用样式表...47,在网页做出一根竖的线有几种办法. 第一种方法:用一个像素图的办法!...Dreamweaver4CSS样式面板: 按CTR+SHIFT+E--出现样式表对话框,点击NEW,出现编辑对话框,左边最后一项extensions-cursor 选择你要改的指针形式就可以了,然后你要想改变的地方运用样式表...47,在网页做出一根竖的线有几种办法. 第一种方法:用一个像素图的办法!

7.3K41

【前端攻略--HTMLCSS】HTML与CSS

通过它可以达到以下目的: 加快域名解析 对于要经常访问的网站,我们可以通过 Hosts 配置域名和 IP 的映射关系,这样当我们输入域名计算机就能很快解析出 IP ,不用请求网络的 DNS...现在可以分别给这些服务器取个容易记住的名字,然后Hosts 建立 IP 映射,这样以后访问的时候我们输入这个服务器的名字就行了。.../rgba(a是透明度) color: rgb(255,255,255); /*文字的位置*/ text-align: center; /*这个设置可以div元素水平居中...important加到颜色后面) 伪类选择器: :before,:after这两个选择器都是创造一个假的元素,假的元素一样可以设置任何样式 (before一个div最上面,after一个div最下面...,都不会被继承 像文字属性,可以父级元素统一相对应的设置 ? ?

99120

CSS | 视差滚动 | 笔记

视差滚动,这种效果可以层看起来更大、更突出。 相反,当一个层的 translateZ 值为正时,它会向外移动,也就是远离观察者的方向。 这样的移动会使层看起来更远离观察者,产生较弱的视差效果。...视差滚动,这种效果可以层看起来较小、较平面。...一个好的解决方案: window.innerHeight 解决这个问题的一种方法是依赖 JavaScript 不是 CSS。...遗憾的是,仍然没有一种简单的方法可以一个元素不依赖javascript的情况下占据整个视口高度。 height: 100vh 是如此接近伟大,但考虑到它在移动设备的局限性,最好避免它。...这时候,很多小图片(需要使用的小图标)放在一张图片,按照一定的距离隔开, 就解决了上述的两个问题。 显示雪碧图的条件: 1. 一个设置好宽和高的容器 2.

57021

css多浏览常见问题

但IE不认得这个, 它实际width当做最小宽度来使。...为了这一命令IE也能用,可以一个 放到 标签下,然后为div指定一个类: 然后CSS这样设计: #container{ min-width: 600px; width...但应该在打印CSS写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以这个CSS设成显示CSS来检查它的效果。...如果你想设定一个导航条是2em高,导航文字垂直居中的话,设定这个属性是没用的。 CSS方法是什么呢?对了,这些文字的行高设为 2em:line-height: 2em ,这就可以了。...当然,有时候定位的方法不是边距的方法更好些。 10、直通到屏幕底部的背景色 垂直方向是进行控制是CSS所不能的。

1K30

css+div网页设计(一)–基础知识

大家好,又见面了,我是全栈君,祝每个程序员都可以多学几门语言。 css是网页制作必不可少的部分,我会用三篇博客为大家展示css的基本使用方法。...是用于控制网页样式并同意将样式信息与网页内容分离的一种标记性语言。 二、使用css控制页面方法 css控制页面的方法共同拥有四种,行内样式、内嵌式、链接式、导入式。...c、链接式 ps:链接式是使用频率最高也是最有用的方法。 d、导入式 ps:导入式最大的优点就是能够一个HTML文件导入多个css样式表。...e、四种页面控制方法的优先级:行内样式>链接式>内嵌式>导入式 三、css选择器 选择器是css的重要概念,全部的HTML语言中的标记都是通过不同的选择器进行控制的。 a、标记选择器。...今天的内容就讲这么多,下篇博客将为大家介绍css+div的美化布局以及css与javascript、ajax、jquery的混合应用。

1.2K30

CSS background属性

属性解释 background属性是css应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项: background-color...设置背景图片是固定还是随着页面滚动条滚动 实际应用,我们可以用background属性将上面所有的设置项放在一起,而且也建议这么做,这样做性能更高,而且兼容性更好,比如:“background:...background-image 设置背景图片地址 ? ---- 设置一下第二个div的宽高,背景图片显示好看一些。 ? 那么能否设置背景图片不重复平铺呢?...从上面几个图可以看到,通过background-position: right top;这些语句,可以调整背景图片的位置。 还有另一种方式就是可以使用像素来进行位置偏移的设定,如下: ?...---- 背景图截图例子说明: background-position的设置,可以水平方向设置“left”、“center”、“right”,垂直方向设置“top”、“center”、“bottom

1.3K10

HTML、CSS、JavaScript学习总结

通过此元素,您可以对列进行组合以便进行格式化。 Span:表格的直列数,不是第几列。...@ 样式表的首要目的是为网页的元素精确定位。其次,网页的内容结构和格式控制相分离。即html的标签主要是定义网页的内容,CSS决定这些网页内容如何显示。...表示背景图片是随着滚动条的移动移动。...• 当用户客户端的浏览器显示该网页时,浏览器就会执行JavaScript程序,用户通过交互式的操作变换网页显示的内容,以实现HTML语言所不能实现的一些功能。 • 提供了数据验证的基本功能。...• 当用户客户端的浏览器显示该网页时,浏览器就会执行JavaScript程序,用户通过交互式的操作变换网页显示的内容,以实现HTML语言所不能实现的一些功能。

3K20

最全的CSS浏览器兼容整理

CSS对浏览器的兼容性有时人很头疼,或许当你了解当中的技巧跟原理,就 会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码...但IE不认得这个,它实际width当 做最小宽度来使。...为了这一命令IE也能用,可以一个 放到 标签下,然后为div指定一个类, 然后CSS这样设计: #container{ min-width: 600px; width...它实际通 过Javascript的判断来实现最小宽度。 6.DIV浮动IE文本产生3象素的bug 左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距....id与class有什么区别吗 一.web标准是不容许重复ID的,比如 div id="aa" 不容许重复2次,class 定义的是类,理论可以无限重复, 这样需要多次引用的定义便可以使用他.

1.5K31
领券