javascript
文章平均质量分 69
背着吉他的蝙蝠女侠
这个作者很懒,什么都没留下…
展开
-
javascript的浏览器对象之window对象
window对象:是BOM的核心,window对象指当前的浏览器窗口,所有JavaScript全局对象、函数以及变量均自动成为window对象的成员。全局变量是window对象的属性;全局函数是window对象的方法。document也是window对象之一。 demo代码如下: Document 按钮1 按钮2 var btn1 = document.getEl原创 2017-12-09 15:03:48 · 456 阅读 · 0 评论 -
javascript动画之焦点图
Document * { margin: 0; padding: 0; list-style: none; } .box { width: 450px; height: 300px; margin: 50px auto; position: relative; } .pic { width: 450px; height:原创 2017-12-23 23:25:31 · 231 阅读 · 0 评论 -
JavaScript的内置对象
Math对象:demo代码如下: Document var a = Math.round(2.55);//四舍五入 var b = Math.min(21,3,1);//最小值 var c = Math.max(32,431,1);//最大值 var d = Math.abs(-32);//绝对值 var e = Math.random();//随机数原创 2017-12-05 23:41:14 · 166 阅读 · 0 评论 -
DOM对象控制HTML
demo代码如下: Document body { height: 1000px; } world1 hello1 hello2 world2 var a = document.getElementsByName("pn")[0];//通过name值获取元素 var c = document.getElementsByName("pn")原创 2017-12-06 23:24:09 · 133 阅读 · 0 评论 -
javascript动画之缓动动画
demo代码如下: Document * { margin: 0; padding: 0; } div { width: 100px; height: 100px; background: yellow; border: 1px solid #000; margin-top: 20px; position: relati原创 2017-12-26 16:07:13 · 225 阅读 · 0 评论 -
javascript动画之跟随运动
demo代码如下: 跟随运动 * { margin: 0; padding: 0; } body { height: 3000px; } div { width: 100px; height: 100px; background: red; border: 1px solid #000; position: ab原创 2018-01-01 18:23:25 · 262 阅读 · 0 评论 -
javascript之获取鼠标在盒子中的位置
demo代码如下: 鼠标在盒子中的坐标 * { margin: 0; padding: 0; } div { width: 400px; height: 400px; font-size: 20px; margin: 100px auto; border: 1px solid #000; } 鼠标在盒子中的原创 2018-01-01 18:53:18 · 618 阅读 · 0 评论 -
javascript之固定导航栏
demo代码如下: Document * { margin: 0; padding: 0; } .container { width: 60%; margin: 0 auto; text-align: center; font-size: 30px; position: relative; } .top { wi原创 2017-12-26 17:47:20 · 244 阅读 · 0 评论 -
javascript之缓慢滚动到顶部
demo代码如下: 回到顶部 * { margin: 0; padding: 0; } .container { width: 100%; margin: 0 auto; } .top { width: 100%; height: 200px; background: red; } .content {原创 2017-12-26 23:13:48 · 339 阅读 · 0 评论 -
javascript之放大镜
demo代码如下: * { margin: 0; padding: 0; } .box { width: 350px; height: 350px; margin:100px;原创 2018-01-02 21:22:09 · 256 阅读 · 0 评论 -
javascript之拖拽
demo代码如下: * { margin: 0; padding: 0; } .nav { height: 30px; background: #036663; border-bottom:原创 2018-01-02 21:23:59 · 182 阅读 · 0 评论 -
javascript之模拟滚动条
demo代码如下: * { margin: 0; padding: 0; } .box { width: 300px; height: 500px; border: 1px solid red;原创 2018-01-02 21:28:10 · 245 阅读 · 0 评论 -
三大家族的区别
clientWidth与clientHeight是指盒子的宽度和内边距。clientLeft表示的是盒子的边框。clientX表示的可视区域距离左边的距离。offsetWidth表示的是盒子宽度和内边距和边框,scrollWidth表示的是内容的宽度,不包含边框。原创 2018-01-02 21:49:37 · 221 阅读 · 0 评论 -
javascrip动画之楼层跳跃
demo代码如下: 楼层跳跃 * { margin: 0; padding: 0; list-style: none; } html,body,.lc,#content { width: 100%; height: 100%; } #content li { width: 100%; height: 100%;原创 2017-12-27 23:37:49 · 302 阅读 · 0 评论 -
javascript之模态框
demo代码如下: motaikuang * { margin: 0; padding: 0; } html,body { height: 100%; width: 100%; } .box { width: 100%; height: 100%; background: rgba(0,0,0,0.4); pos原创 2018-01-03 21:13:14 · 188 阅读 · 0 评论 -
javascript之ajax请求数据demo
demo代码如下:html的demo代码如下: Document * { margin: 0; padding: 0; } .imgbox { width: 256px; height: 170px; border: 1px solid #000; margin: 20px auto; } .imgbox img {原创 2018-01-13 16:23:41 · 897 阅读 · 0 评论 -
ajax之使用get方式向服务器发送请求
html代码如下: Document var username = document.getElementById("username"); var address = document.getElementById("address"); var btn = document.getElementById("btn"); c原创 2018-01-06 22:27:22 · 876 阅读 · 0 评论 -
javascript动画之匀速运动
demo代码如下: Document * { margin: 0; } div { width: 100px; height: 100px; background: red; margin-top: 20px; position: relative; left: 0; } 运动到200 运动到400 1 2原创 2017-12-23 15:35:57 · 236 阅读 · 0 评论 -
javascript浏览器对象之location对象
1. location对象:window.location对象用于获取当前页面的地址(URL),并把浏览器重定向到新的页面。2. location对象的属性:location.hostname返回web主机的域名location.pathname返回当前页面的路径和文件名location.port返回web主机的端口location.protocol返回所使用的web协议(http原创 2017-12-09 15:24:40 · 350 阅读 · 0 评论 -
javascript浏览器对象之screen对象
1. screen对象:window.screen对象包含有关用户屏幕的信息。2.属性: screen.availWidth表示可用屏幕的宽度;screen.availHeight表示可用屏幕的高度;screen.Height表示的是屏幕高度;screen.Width表示屏幕宽度demo代码如下: Document 按钮1 按钮2 console.l原创 2017-12-09 15:50:15 · 403 阅读 · 0 评论 -
javascript浏览器对象之history对象
history对象:window.history对象包含浏览器的历史(URL)的集合history方法:history.back()表示与浏览器点击后退按钮相同;history.forward()与在浏览器中点击按钮向前相同;history.go()表示进入历史中的某个页面demo代码如下: Document 按钮1 按钮2 var btn1 = docu原创 2017-12-09 16:16:31 · 207 阅读 · 0 评论 -
javascript浏览器对象之计时器
记时方法:方法一:seInterval()间隔指定的毫秒数不停地执行指定代码clearInterval()方法用于停止setInterval()方法执行的函数代码方法二:setTimeout()暂停指定的毫秒数后执行指定的代码clearTimeout()方法用于停止执行setTimeout()方法的函数代码原创 2017-12-10 20:17:30 · 267 阅读 · 0 评论 -
javascript函数之函数的调用
函数调用的方式有两种:方法一: 在javascript中调用,代码如下: Document function demo() { var a = 10; var b = 10; var sum = a + b; alert(sum); } demo(); -->方法二:在html中调用,代码如下: Docum原创 2017-12-04 17:26:18 · 155 阅读 · 0 评论 -
javascript函数之局部变量和全局变量
下面代码中:a和d是全局变量,c和d是局部变量,如果下面代码的函数没有被调用的话,c也不会输出,当执行到输出c的时候,就会报错,如果下面的代码被调用的话,那么输出到c不会报错,会直接输出,但是执行到输出b的时候,就会报错。下面代码输出的是1,3,4,报错。 Document var a = 1; d = 4; function demo() { var b原创 2017-12-04 17:50:32 · 153 阅读 · 0 评论 -
javascript之事件
事件就是可以被javascript侦测到的行为原创 2017-12-04 20:04:01 · 147 阅读 · 0 评论 -
javascript之异常捕获
异常:当javascript引擎执行javascript代码时,发生了错误,导致程序停止执行。异常抛出:当异常产生的时候,并且将这个异常生成一个错误信息。异常捕获:try{发生异常的代码;}catch(err){错误信息处理;},demo代码如下:try{}catch(err){}的执行时和if{}else{}差不多。 Document fu原创 2017-12-04 20:33:06 · 172 阅读 · 0 评论 -
javascript之DOM对象操作HTML
HTML DOM:当网页被加载的时候,浏览器会创建页面的文档对象模型(document object model)。DOM操作HTML:(1)改变文档的输出流。document.write(),是改变整个文档。(2)寻找元素。通过id寻找元素,document.getElementById("id名称");通过标签获取元素,document.getElementsByTagName("原创 2017-12-04 22:36:20 · 276 阅读 · 0 评论 -
javascript之DOM操作CSS
DOM操作CSS: 基本语法:document.getElementById("id名称”).style.属性 = "属性值"。 Document 这是一个盒子 var box = document.getElementById("box"); box.onclick = function(){ box.style.color = "red";原创 2017-12-04 22:59:22 · 115 阅读 · 0 评论 -
javascript之DOM EventListener
DOM EventListener:方法:addEventListener(); removeEventListener();addEventListener(事件,执行的函数):用于向指定元素添加事件句柄。demo代码如下: Document 这是一个盒子 点击 var box = document.getElementById("bo原创 2017-12-04 23:22:16 · 223 阅读 · 0 评论 -
javascript之事件对象
事件对象:在触发DOM对象的时候会产生一个对象。事件对象event:type表示的是事件的类型;target表示的是获取事件目标;stopPropagation()表示的是阻止事件的冒泡;preventDefault()表示的是阻止事件的默认行为。 Document 点击 点击试试 var btn = document.getElementById("原创 2017-12-04 23:47:08 · 133 阅读 · 0 评论 -
javascript之对象
对象:javascript中所有的事物都是对象:字符串、数值、数组、函数……每个对象带有属性和方法。javascript是允许自定义对象的。创建对象:方法一: Document var joe = new Object(); joe.name = "joe"; joe.age = 30; document.write(joe.name,joe.ag原创 2017-12-05 15:37:32 · 114 阅读 · 0 评论 -
javascript三大家族之offset
offsetWidth=Width+padding+border+margin;offsetTop是指距离定位盒子顶部的距离;offsetLeft是指距离定位盒子左边的距离。以上得到的都是数值类型的数据,demo代码如下: Document * { margin: 0; padding: 0; } .box { width: 600px;原创 2017-12-22 22:43:23 · 236 阅读 · 0 评论 -
javascript之style.left和offsetLeft的区别
offsetLeft取到的值是数值型的,只能取值,不能赋值。style.left在取值的时候要事先定义好,否则取到的值为空值,不仅仅可以取值,而且还可以赋值,取到的值为字符串类型的。 demo代码如下: Document * { margin: 0; padding: 0; } .box { width: 600px; height: 6原创 2017-12-23 10:52:46 · 662 阅读 · 0 评论 -
javascript之动画
javascript动画之闪动动画: demo代码: Document div { width: 100px; height: 100px; background: red; margin-top: 20px; position: relative; } 按钮 var btn = document.getElements原创 2017-12-23 11:32:03 · 153 阅读 · 0 评论 -
ajax之post请求
html代码如下: post请求 var btn = document.getElementById("btn"); btn.onclick = function(){ var ajaxObj = new XMLHttpRequest(); ajaxObj.open("post","first.php"); // 如果使原创 2018-01-07 21:37:41 · 377 阅读 · 0 评论