位置: 编程技术 - 正文

JavaScript 经典实例日常收集整理(常用经典)(js经典实例)

编辑:rootadmin

推荐整理分享JavaScript 经典实例日常收集整理(常用经典)(js经典实例),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:js100个经典实例,js类的实现,js类的实现,js经典实例,js实例教程,javascript例子,javascript例子,javascript例子,内容如对您有帮助,希望把文章链接给更多的朋友!

本文是小编日常收集整理些js经典实例,特此分享到积木网平台供大家参考!

跨浏览器添加事件

跨浏览器移除事件

跨浏览器阻止默认行为

跨浏览器获取目标对象

跨浏览器获取滚动条位置

跨浏览器获取可视窗口大小

js 对象冒充

js 异步加载和同步加载

异步加载也叫非阻塞模式加载,浏览器在下载js的同时,同时还会执行后续的页面处理。

在script标签内,用js创建一个script元素并插入到document中,这种就是异步加载js文件了:

同步加载

  平常默认用的都是同步加载。如:

  同步模式又称阻塞模式,会阻止流览器的后续处理。停止了后续的文件的解析,执行,如图像的渲染。浏览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作,重定向,输出document等默认行为,所以同步才是最安全的。

  通常会把要加载的js放到body结束标签之前,使得js可在页面最后加载,尽量减少阻塞页面的渲染。这样可以先让页面显示出来。

  同步加载流程是瀑布模型,异步加载流程是并发模型。

js获取屏幕坐标

注释:

1.documentElement 属性可返回文档的根节点。 2.scrollTop() 为滚动条向下移动的距离3.document.documentElement.scrollTop 指的是滚动条的垂直坐标4.document.documentElement.clientHeight 指的是浏览器可见区域高度

--------------------------------------------------------------------------------

DTD已声明的情况下:

如果在页面中添加这行标记的话

IE

document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.documentElement.clientWidth ==> 可见区域宽度document.documentElement.clientHeight ==> 可见区域高度

Firefox

document.documentElement.scrollHeight ==> 浏览器所有内容高度document.body.scrollHeight ==> 浏览器所有内容高度document.documentElement.scrollTop ==> 浏览器滚动部分高度document.body.scrollTop ==>始终为0document.documentElement.clientHeight ==>浏览器可视部分高度document.body.clientHeight ==> 浏览器所有内容高度

Chrome

document.documentElement.scrollHeight ==> 浏览器所有内容高度document.body.scrollHeight ==> 浏览器所有内容高度document.documentElement.scrollTop==> 始终为0document.body.scrollTop==>浏览器滚动部分高度document.documentElement.clientHeight ==> 浏览器可视部分高度document.body.clientHeight ==> 浏览器所有内容高度

浏览器所有内容高度即浏览器整个框架的高度,包括滚动条卷去部分+可视部分+底部隐藏部分的高度总和

浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。

综上

1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0,所以可以用这两个的和来求scrollTop

2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement,未声明的情况下用body

clientHeight

在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。

PageX和clientX

PageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化

JavaScript 经典实例日常收集整理(常用经典)(js经典实例)

clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.

可是悲剧的是,PageX只有FF特有,IE则没有这个,所以在IE下使用这个:

PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)

scrollTop代表的是被浏览器滑动条滚过的长度

offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder`,可能出现负值

只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.

最给力的是,chrome和safari一条龙通杀!完全支持所有属性

js拖拽效果

offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。

js获取图片原始大小尺寸

js循环遍历数组

遍历二维数组

阻止表单重复提交

有两种方法可以解决:一是提交之后,立刻禁用点击按钮;第二种就是提交之后取消后续的表单提交操作。document.getElementById("btn").disabled = true;//第一次提交后,将按钮禁用

这种方式只能用于通过提交按钮防止重复提交,还可以使用如下方式:

字符串部分

在字符串中查找子字符串

Number和Math部分

数字可以是一个直接量,也可以是一个对象,但是Math对象不同,他没有构造函数,并且其所有的属性和方法都是直接通过这个对象来访问的

把十进制转化为一个十六进制值

js中,十进制数字以0x开头,八进制数字总是以0开头

随进产生颜色

目前,所有浏览器都支持RGB表示法和十六进制表示法,除了IE7,它只支持十六进制表示法

在角度和弧度之间转换

var rad = degrees*(Math.PI/);

var degrees = rad*(/Math.PI);

数组部分

创建多维数组

排序数组

Array对象的sort方法会按照字母顺序来排序数组元素。对于数字,是按照字符编码的顺序进行排序

Date日期时间部分

js计算时间差

正则部分

js实现千分位分隔

js判断传入参数是否为质数

js判断字符串出现最多的字符,并统计次数

以上内容是小编日常收集整理的JavaScript 经典实例,非常具有参考价值,感兴趣的朋友收藏起来吧。

网页中JS函数自动执行常用三种方法 本文为大家分享了在网页中JS函数自动执行常用方法,供大家参考,具体内容如下一、JS方法1.最简单的调用方式,直接写到html的body标签里面:bodyonload="

基于javascript实现样式清新图片轮播特效 本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下一、实现效果如上图:1、图片自动依次轮换,每轮换到一张图片,下面对

javascript实现数字倒计时特效 本文实例讲述了JS实现的网页倒计时数字时钟效果,分享给大家供大家参考,具体实现方法如下:效果图:htmlheadmetahttp-equiv="Content-Type"content="text/html;char

标签: js经典实例

本文链接地址:https://www.jiuchutong.com/biancheng/375998.html 转载请保留说明!

上一篇:JavaScript 浏览器兼容性总结及常用浏览器兼容性分析(JavaScript 浏览器对象)

下一篇:网页中JS函数自动执行常用三种方法(js网页自动化)

  • 增值税抵扣了还能作废吗
  • 分支机构设立当年是否需要就地预缴企业所得税?
  • 13点专票和13点普票的区别
  • 火车票丢失可以抵扣进项税额
  • 企业所得税汇算清缴申报表
  • 买金税盘发票能全额抵进项税吗
  • 新领的发票怎么导入uk开票系统
  • 差额发票和全额发票的税率
  • 工程公司收入成本入账
  • 利润是负数如何计算利润率
  • 预付水电费后应怎么做账
  • 增值税发票时效性
  • 固定资产提前报废需要补提折旧吗
  • 商品流通企业批发销售会计分录
  • 什么企业不可以开通信保订单服务
  • 进料加工料件需补税的情况
  • 专利技术使用权转让属于特许权使用费
  • 跨区域个人所得税延期情况说明
  • 工程出差主要是做什么
  • 专用发票可以抵税是什么意思
  • 电脑管家如何深度访问
  • 冲销多计提个税怎么做账
  • cpu天梯图,最新
  • 华为鸿蒙系统如何关闭纯净系统
  • win11开机后无法操作
  • executor进程
  • cpqeadm.exe是什么进程 可以关闭吗 cpqeadm进程查询
  • php怎么转换
  • php最好的编程语言
  • PHP:mcrypt_enc_self_test()的用法_Mcrypt函数
  • 一般纳税人转让不动产预缴
  • 费用扣除制度
  • 发票开具有误拒收后销售方如何处理?
  • 在java中有一种叫做
  • 租赁合同印花税率多少
  • vue 长列表优化
  • 小规模纳税人的条件
  • 资产账面价值大于计税基础产生递延所得税负债
  • 卖方付给买方的正常回扣
  • 捐赠收入要交所得税吗
  • 企业增值税发票税率是多少
  • 其他应付款个人在贷方表示什么
  • 工会经费计税依据比例
  • 小型微利企业所得税按什么预缴
  • mysql命令行实用程序
  • 公司注销前欠客户钱
  • 普通发票记账联丢了怎么解决
  • 进度款开票是开实收金额吗
  • 公司员工年薪如何发放
  • 发行债券支付的发行费用计入哪里
  • 库存商品期末为负数
  • 改良设备的入账价值
  • 购买扶贫产品属于什么费用
  • 资产减值后折旧怎么算
  • 开票信息中电话怎么填
  • 结账前要做哪些准备工作
  • SQL Select语句完整的执行顺序
  • win8怎么运行
  • 远程登陆服务器命令
  • 怎么提高xp系统运行速度
  • windowsxp怎么改windows7
  • win8.1不能关机
  • 怎么更改windows商店的安装位置
  • linux系统怎么弄
  • Android开源ui框架
  • cmd进入控制面板代码
  • div +css
  • jquery 字符串以什么开头
  • python结巴分词
  • nodejs 内存不断增长
  • nodejs连接redis
  • node的使用
  • 使用BMFont+NGUI利用图片制作自定义字体
  • node. js教程
  • jquery.ztree中文api
  • python安装第三方模块
  • 开票系统增值税专票税率选多少
  • 国家税务总局12366纳税服务平台
  • 税务核查主要核算内容
  • 小规模纳税人土地使用税减免政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设