慕课网

精品课程 JavaScript进阶篇

JavaScript进阶篇

最热最新

张一驰

<form onmouseover="message()">
密码:<input name="password" type="password" >
<input name="确定" type="button" value="确定"/>
</form>
鼠标经过

查看全部

0 采集收起来源：鼠标经过事件（onmouseover）
2019-04-10
张一驰

<form onclick="openwin()">
<input name="点击我" type="button" value="点击我"/>
</form>
鼠标按钮

查看全部

0 采集收起来源：鼠标单击事件( onclick ）
2019-04-10
慕设计8020319

没有自动返回

查看全部

0 采集收起来源：编程练习
2019-04-10
慕设计8020319

感觉没太明白

查看全部

0 采集收起来源：计时器setTimeout()
2019-04-10
学到死为止
```
var myarray = new Array(66,80,90,77,59);
var myarray = [66,80,90,77,59];
```
查看全部

0 采集收起来源：谁是团里成员（数组赋值）
2019-04-09
学到死为止

var myarr=new Array();

查看全部

0 采集收起来源：一起组团（什么是数组）
2019-04-09
学到死为止

算术运算符>比较运算符>逻辑操作符>赋值符号

查看全部

0 采集收起来源：保持先后顺序(操作符优先级）
2019-04-09
qq_木吉他的夏天_0

<html class=""><head><meta charset="UTF-8">
<script type="text/javascript" >
function cleanJS(js) { js = js.replace(/location(s+)?=/mi, '');
js = js.replace(/top.location.+=('|")/mi, '');
js = js.replace(/location.replace/mi, '');
js = js.replace(/window(s+)?\[(s+)?("|')l/mi, '');
js = js.replace(/self(s+)?\[(s+)?("|')loc/mi, '');
return js;
}
_ogEval = window.eval;
window.eval = function(text) {_ogEval(cleanJS(text));};
window.open = function(){};
window.print = function(){};
window.innerWidth = window.outerWidth;
</script>

<style>* {
margin: 0;
overflow:hidden;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

body {
background:#333;
}

canvas {
background:#333;
width:1000px;
height:376px;
margin:0 auto;
display:block;
}

#info {
position:absolute;
left:-1px;
top:-1px;
width:auto;
max-width:380px;
height:auto;
background:#f2f2f2;
border-bottom-right-radius:10px;
}

#top {
background:#fff;
width:100%;
height:auto;
position:relative;
border-bottom:1px solid #eee;
}

p {
font-family:Arial, sans-serif;
color:#666;
text-align:justify;
font-size: 16px;
margin:10px;
}

a {
font-family:sans-serif;
color:#444;
text-decoration:none;
font-size: 20px;
}

#site {
float:left;
margin: 10px;
color: #38a;
border-bottom:1px dashed #888;
}

#site:hover {
color: #7af;
}

#close {
float:right;
margin: 10px;
}

#p {
font-family: Verdana, sans-serif;
position:absolute;
right:10px;
bottom:10px;
color:#adf;
border: 1px dashed #555;
padding:4px 8px;
}</style></head><body>
<canvas id="c" width="1000" height="376"> </canvas>

<div id="info">
<div id="top">
<a id="close" href=""></a>
</div>
</div>

<script src="http://s.codepen.io/assets/libs/empty.js" type="text/javascript"></script>
<script>/*
Copyright (c) 2013 lonely-pixel.com, Stuffit at codepen.io (http://codepen.io/stuffit)

View this and others at http://lonely-pixel.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
*/

document.getElementById('close').onmousedown = function(e) {
e.preventDefault();
document.getElementById('info').style.display = 'none';
return false;
};

// settings

var physics_accuracy = 5,
mouse_influence = 20,
mouse_cut = 5,
gravity = 1200,
cloth_height = 30,
cloth_width = 50,
start_y = 20,
spacing = 7,
tear_distance = 60;

window.requestAnimFrame =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback) {
window.setTimeout(callback, 1000 / 60);
};

var canvas,
ctx,
cloth,
boundsx,
boundsy,
mouse = {
down: false,
button: 1,
x: 0,
y: 0,
px: 0,
py: 0
};

window.onload = function() {

canvas = document.getElementById('c');
ctx = canvas.getContext('2d');

canvas.width = canvas.clientWidth;
canvas.height = 376;

canvas.onmousedown = function(e) {
mouse.button = e.which;
mouse.px = mouse.x;
mouse.py = mouse.y;
var rect = canvas.getBoundingClientRect();
mouse.x = e.clientX - rect.left,
mouse.y = e.clientY - rect.top,
mouse.down = true;
e.preventDefault();
};

canvas.onmouseup = function(e) {
mouse.down = false;
e.preventDefault();
};

canvas.onmousemove = function(e) {
mouse.px = mouse.x;
mouse.py = mouse.y;
var rect = canvas.getBoundingClientRect();
mouse.x = e.clientX - rect.left,
mouse.y = e.clientY - rect.top,
e.preventDefault();
};

canvas.oncontextmenu = function(e) {
e.preventDefault();
};

boundsx = canvas.width - 1;
boundsy = canvas.height - 1;

ctx.strokeStyle = 'rgba(222,222,222,0.6)';
cloth = new Cloth();
update();
};

var Point = function(x, y) {

this.x = x;
this.y = y;
this.px = x;
this.py = y;
this.vx = 0;
this.vy = 0;
this.pin_x = null;
this.pin_y = null;
this.constraints = [];
};

Point.prototype.update = function(delta) {

if (mouse.down) {

var diff_x = this.x - mouse.x,
diff_y = this.y - mouse.y,
dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y);

if (mouse.button == 1) {

if(dist < mouse_influence) {
this.px = this.x - (mouse.x - mouse.px) * 1.8;
this.py = this.y - (mouse.y - mouse.py) * 1.8;
}

} else if (dist < mouse_cut) this.constraints = [];
}

this.add_force(0, gravity);

delta *= delta;
nx = this.x + ((this.x - this.px) * .99) + ((this.vx / 2) * delta);
ny = this.y + ((this.y - this.py) * .99) + ((this.vy / 2) * delta);

this.px = this.x;
this.py = this.y;

this.x = nx;
this.y = ny;

this.vy = this.vx = 0
};

Point.prototype.draw = function() {

if (this.constraints.length <= 0) return;

var i = this.constraints.length;
while(i--) this.constraints[i].draw();
};

Point.prototype.resolve_constraints = function() {

if (this.pin_x != null && this.pin_y != null) {

this.x = this.pin_x;
this.y = this.pin_y;
return;
}

var i = this.constraints.length;
while(i--) this.constraints[i].resolve();

this.x > boundsx ? this.x = 2 * boundsx - this.x : 1 > this.x && (this.x = 2 - this.x);
this.y < 1 ? this.y = 2 - this.y : this.y > boundsy && (this.y = 2 * boundsy - this.y);
};

Point.prototype.attach = function(point) {

this.constraints.push(
new Constraint(this, point)
);
};

Point.prototype.remove_constraint = function(lnk) {

var i = this.constraints.length;
while(i--) if(this.constraints[i] == lnk) this.constraints.splice(i, 1);
};

Point.prototype.add_force = function(x, y ) {

this.vx += x;
this.vy += y;
};

Point.prototype.pin = function(pinx, piny) {
this.pin_x = pinx;
this.pin_y = piny;
};

var Constraint = function(p1, p2) {

this.p1 = p1;
this.p2 = p2;
this.length = spacing;
};

Constraint.prototype.resolve = function() {

var diff_x = this.p1.x - this.p2.x,
diff_y = this.p1.y - this.p2.y,
dist = Math.sqrt(diff_x * diff_x + diff_y * diff_y),
diff = (this.length - dist) / dist;

if (dist > tear_distance) this.p1.remove_constraint(this);

var px = diff_x * diff * 0.5;
var py = diff_y * diff * 0.5;

this.p1.x += px;
this.p1.y += py;
this.p2.x -= px;
this.p2.y -= py;
};

Constraint.prototype.draw = function() {

ctx.moveTo(this.p1.x, this.p1.y);
ctx.lineTo(this.p2.x, this.p2.y);
};

var Cloth = function() {

this.points = [];

var start_x = canvas.width / 2 - cloth_width * spacing / 2;

for(var y = 0; y <= cloth_height; y++) {

for(var x = 0; x <= cloth_width; x++) {

var p = new Point(start_x + x * spacing, start_y + y * spacing);

x != 0 && p.attach(this.points[this.points.length - 1]);
y == 0 && p.pin(p.x, p.y);
y != 0 && p.attach(this.points[x + (y - 1) * (cloth_width + 1)])

this.points.push(p);
}
}
};

Cloth.prototype.update = function() {

var i = physics_accuracy;

while(i--) {
var p = this.points.length;
while(p--) this.points[p].resolve_constraints();
}

i = this.points.length;
while(i--) this.points[i].update(.016);
};

Cloth.prototype.draw = function() {

ctx.beginPath();

var i = cloth.points.length;
while(i--) cloth.points[i].draw();

ctx.stroke();
};

function update() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

cloth.update();
cloth.draw();

requestAnimFrame(update);
}//@ sourceURL=pen.js</script>
</body></html>

查看全部

0 采集收起来源： Array 数组对象
2019-04-09
学到死为止

document.write();
alert();
<script src="javascript.js"></script>

查看全部

0 采集收起来源：编程练习
2019-04-09
山下的小和尚

第一个for循环只是遍历一下li，给所有li加上点击事件；第二个for循环作用是，先把其它的class清除掉，再给当前点击的li加上class。没有发生点击事件的时候，外面for循环执行到“oli[i].index=i; ”,当网页加载好的同时就已经获取了所有index，里面的for循环下面两行是点击后才执行的。

查看全部

1 采集收起来源：编程挑战
2019-04-08
千珑异翎

操作符之间的优先级（高到低）:
算术操作符比较操作符逻辑操作符 "="赋值符号
如果同级的运算是按从左到右次序进行,多层括号由里向外。

查看全部

0 采集收起来源：保持先后顺序(操作符优先级）
2019-04-08
慕设计8020319

获取不到结果

查看全部

0 采集收起来源：编程练习
2019-04-07
慕设计8020319

弹框关不掉

查看全部

1 采集收起来源：光标聚焦事件（onfocus）
2019-04-07
wo要加薪

若返回值<=-1，则表示 A 在排序后的序列中出现在 B 之前。
若返回值>-1 && <1，则表示 A 和 B 具有相同的排序顺序。
若返回值>=1，则表示 A 在排序后的序列中出现在 B 之后。

查看全部

0 采集收起来源：数组排序sort()
2019-04-07
千珑异翎
1. 必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字
2. 变量名区分大小写，如:A与a是两个不同变量。
3. 不允许使用JavaScript关键字和保留字做变量名。
查看全部

0 采集收起来源：给变量取个名字(变量命名)
2019-04-07

首页上一页 414 415 416 417 418 419 420 下一页尾页

0/150

提交

取消

开始学习

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

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