慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

月读o_O

do while结构的基本原理和while结构是基本相同的，但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。
do...while语句结构：
do {
    循环语句
} while(判断条件)
我们试着输出5个数字。
<script type="text/javascript">
var num=1;
    do {
        document.write("数值为："+num+"<br />");
        num++; //更新条件
    } while (num<=5)；
</script>
执行结果：

为什么呢？我们来看下执行思路：

查看全部

0 采集收起来源：来来回回(Do...while循环)
2018-08-31
月读o_O

while语句结构：
while(判断条件) {
循环语句...
}
使用while循环，完成从盒子里取球的动作，每次取一个，共6个球。
<script type="text/javascript">
    var num=0; //初始化值
    while (num<=6) //条件判断 {
        document.write("取出第"+num+"个球<br />");
        num=num+1; //条件值更新
    }
</script>

查看全部

0 采集收起来源：反反复复(while循环)
2018-08-20
月读o_O

for语句结构：
for (初始化变量; 循环条件; 循环迭代) {
    循环语句 ...
}
例子：
假如，一个盒子里有6个球，我们每次取一个，重复从盒中取出球，直到球取完为止。
<script type="text/javascript">
    var num=1;
    for (num=1;num<=6;num++) //初始化值；循环条件；循环后条件值更新 {
        document.write("取出第"+num+"个球<br />");
    }
</script>
结果：
执行思路：

查看全部

0 采集收起来源：重复重复（for循环）
2018-08-20
月读o_O

当有很多种选项的时候，switch比if else使用更方便。
语法：
switch (表达式) {
    case值1:
        执行代码块1;
        break;
    case值2:
        执行代码块2;
        break;
    ...case值n:
        执行代码块n;
        break;
    default:
        与 case值1、case值2...case值n 都不匹配时执行的代码;
}
语法说明：
switch 必须赋初始值，值与每个 case 值匹配。满足条件则执行该 case 后的所有语句，并用 break 语句来阻止运行下一个case。如所有 case 值都不匹配，则执行default后的语句。

查看全部

0 采集收起来源：多种选择（Switch语句)
2018-08-27
一只熊bear

setTimeout();和clearTimeout（);
这两个函数构建了关于时间的函数，就好像f(t)=t的这样一个关系式，这个任务让我联想到：
javascript入门和进阶的知识，已经足够让我做一个低配版的超级玛丽了。
当然超级玛丽和蘑菇人的模型需要用方块来表示，并且有一些细节还没有完全理顺，只是一个idea。
利用<input type="button">来关联一个开始游戏的函数，开始游戏的函数绑定一个计时器，像该题中的num一样，不过在这里，我称它为time(时间)，从零开始，一秒一加。
玛丽和蘑菇人的碰撞实际上是一个两车相遇模型，s=vt,time我们已经有了，v(速度)我们可以设定，用匀速比较方便，s（位移）相同时，即发生一个判定(写一个函数)，宣布GameOver，当我们在规定时间内到达指定位移时，即获得胜利，并且停止计时。
看到控制时间的函数就很兴奋，这就意味者我可以让网页图片轮播，制作非常低配的动态效果。
欢迎大家来和我交流~！

查看全部

1 采集收起来源：取消计时器clearTimeout()
2018-08-20
six_five

网页卷去的距离与偏移量
我们先来看看下面的图：
scrollLeft:设置或获取位于给定对象左边界与窗口中目前可见内容的最左端之间的距离，即左边灰色的内容。
scrollTop:设置或获取位于对象最顶端与窗口中可见内容的最顶端之间的距离，即上边灰色的内容。
offsetLeft:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
offsetTop:获取指定对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。
注意:
1. 区分大小写
2. offsetParent：布局中设置postion属性(Relative、Absolute、fixed)的父容器，从最近的父节点开始，一层层向上找，直到HTML的body。

查看全部

0 采集收起来源：网页卷去的距离与偏移量
2018-08-20
six_five
网页尺寸offsetHeight
offsetHeight和offsetWidth，获取网页内容高度和宽度(包括滚动条等边线，会随窗口的显示大小改变)。
一、值
offsetHeight = clientHeight + 滚动条 + 边框。
二、浏览器兼容性
```
var w= document.documentElement.offsetWidth     || document.body.offsetWidth; var h= document.documentElement.offsetHeight     || document.body.offsetHeight;
```
查看全部

0 采集收起来源：网页尺寸offsetHeight
2018-08-19
six_five
网页尺寸scrollHeight
scrollHeight和scrollWidth，获取网页内容高度和宽度。
一、针对IE、Opera:
scrollHeight 是网页内容实际高度，可以小于 clientHeight。
二、针对NS、FF:
scrollHeight 是网页内容高度，不过最小值是 clientHeight。也就是说网页内容实际高度小于 clientHeight 时，scrollHeight 返回 clientHeight 。
三、浏览器兼容性
```
var w=document.documentElement.scrollWidth    || document.body.scrollWidth; var h=document.documentElement.scrollHeight    || document.body.scrollHeight;
```
注意:区分大小写
scrollHeight和scrollWidth还可获取Dom元素中内容实际占用的高度和宽度。
查看全部

0 采集收起来源：网页尺寸scrollHeight
2018-08-19
six_five
浏览器窗口可视区域大小
获得浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）的方法:
一、对于IE9+、Chrome、Firefox、Opera 以及 Safari：
• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度
二、对于 Internet Explorer 8、7、6、5：
• document.documentElement.clientHeight表示HTML文档所在窗口的当前高度。
• document.documentElement.clientWidth表示HTML文档所在窗口的当前宽度。
或者
Document对象的body属性对应HTML文档的<body>标签
• document.body.clientHeight
• document.body.clientWidth
在不同浏览器都实用的 JavaScript 方案：
```
var w= document.documentElement.clientWidth       || document.body.clientWidth; var h= document.documentElement.clientHeight       || document.body.clientHeight;
```
查看全部

0 采集收起来源：浏览器窗口可视区域大小
2018-08-19
six_five
创建文本节点createTextNode
createTextNode() 方法创建新的文本节点，返回新创建的 Text 节点。
语法：
```
document.createTextNode(data)
```
参数：
data : 字符串值，可规定此节点的文本。
我们来创建一个<div>元素并向其中添加一条消息，代码如下：
运行结果:
查看全部

0 采集收起来源：创建文本节点createTextNode
2018-08-19

six_five

创建元素节点createElement

createElement()方法可创建元素节点。此方法可返回一个 Element 对象。

语法：

document.createElement(tagName)

参数:

tagName：字符串值，这个字符串用来指明创建元素的类型。

注意：要与appendChild() 或 insertBefore()方法联合使用，将元素显示在页面中。

我们来创建一个按钮，代码如下：

<script type="text/javascript">    var body = document.body;    var input = document.createElement("input");      input.type = "button";      input.value = "创建一个按钮";      body.appendChild(input);    </script>

效果：在HTML文档中，创建一个按钮。

我们也可以使用setAttribute来设置属性，代码如下：

<script type="text/javascript">      var body= document.body;                 var btn = document.createElement("input");      btn.setAttribute("type", "text");      btn.setAttribute("name", "q");      btn.setAttribute("value", "使用setAttribute");      btn.setAttribute("onclick", "javascript:alert('This is a text!');");           body.appendChild(btn);   </script>

效果：在HTML文档中，创建一个文本框，使用setAttribute设置属性值。当点击这个文本框时，会弹出对话框“This is a text!”。

查看全部

0 采集收起来源：创建元素节点createElement

2018-08-19

二柱学IT

onclick 鼠标单击事件
onmouseover 鼠标经过事件
onmouseout 鼠标移开事件
onchange 文本框改变事件
onselect 文本框内容被选中事件
onfocus 光标聚集
onblur 光标离开
onload 网页导入
onunload 关闭网页

查看全部

0 采集收起来源：鼠标单击事件( onclick ）
2018-08-19
weixin_慕勒4405190
```
算术运算符>比较运算符>逻辑运算符
```
查看全部

0 采集收起来源：保持先后顺序(操作符优先级）
2018-08-19
weixin_慕勒4405190

“+”不只代表加法，还可以连接两个字符串。

查看全部

0 采集收起来源：我还有其它用途( +号操作符）
2018-08-19
Adongy
```
//插入最后一个前面
  otest.insertBefore(newnode,otest.lastChild);
```
查看全部

0 采集收起来源：插入节点insertBefore()
2018-08-18

首页上一页 642 643 644 645 646 647 648 下一页尾页

0/150

提交

取消

开始学习

课程须知: 你需要具备HTML、css基础知识，建议同学们也可以想学习下js入门篇，快速认识js，熟悉js基本语法，更加快速入手进阶篇！

老师告诉你能学到什么？: 通过JavaScript学习，掌握基本语法，制作简单交互式页面

JavaScript进阶篇

网页卷去的距离与偏移量

网页尺寸offsetHeight

网页尺寸scrollHeight

浏览器窗口可视区域大小

创建文本节点createTextNode

创建元素节点createElement