为了账号安全，请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
获取体验码
JavaScript进阶篇_学习笔记_慕课网
为了账号安全，请及时绑定邮箱和手机立即绑定
精品课程 JavaScript进阶篇

JavaScript进阶篇

慕课官方号 页面重构设计
难度入门
时长 8小时55分
最热 最新
  • 慕小大姐

    for 循环倒叙 不会删除三次 才能删除

    点击删除 第一次不删除 的原因是  子节点有间隔  消除间隔

    查看全部
    0 采集 收起 来源：删除节点removeChild()

    2018-05-06

  • M_hua

    我觉得有个地方需要特别注意： var myarray=new Array(5);当括号中只有一个数字时，数字代表的是数组的长度，当有多个数字时，才表示的是数组中的元素，这是我问前端同事后才知道的。(转载)

    查看全部
    1 采集 收起 来源：什么是对象

    2018-05-05

  • M_hua

    获取value值进行加法运算的时候会默认字符串相连，所以会出现a+b=ab这种情况。用parseInt（）解析字符串返回一个整数

    查看全部
    0 采集 收起 来源：编程练习

    2018-05-05

  • 孤独离人

    <script type="text/javascript">

    function add2(){

    var numa,numb,sum;

    numa=3;

    numb=5;

    sub=numa+numb;

    document.write("两数之和："+sum)}

    </script>

    <body>

    <form>

    <input name="button" type="button" value="点击提交" onclick="add2()" />

    </foem>

    查看全部
    0 采集 收起 来源：鼠标单击事件( onclick ）

    2018-05-05

  • Hello_my_new_world

    经验：设置网页中的竖线可用border-right

    查看全部
    0 采集 收起 来源：网页卷去的距离与偏移量

    2018-05-05

  • Hello_my_new_world

    clear 属性规定元素的哪一侧不允许其他浮动元素。

    值描述
    left在左侧不允许浮动元素。
    right在右侧不允许浮动元素。
    both在左右两侧均不允许浮动元素。
    none默认值。允许浮动元素出现在两侧。
    inherit规定应该从父元素继承 clear 属性的值。


    查看全部
    0 采集 收起 来源：网页卷去的距离与偏移量

    2018-05-05

  • Hello_my_new_world

    list-style-type 属性设置列表项标记的类型。

    常用值：

    值描述
    none无标记。
    disc默认。标记是实心圆。
    circle标记是空心圆。
    square标记是实心方块。
    decimal标记是数字。
    decimal-leading-zero0开头的数字标记。(01, 02, 03, 等。)
    lower-roman小写罗马数字(i, ii, iii, iv, v, 等。)
    upper-roman大写罗马数字(I, II, III, IV, V, 等。)
    lower-alpha小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
    upper-alpha大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

    line-height 属性设置行间的距离（行高）。

    注释：不允许使用负值。


    查看全部
    0 采集 收起 来源：网页卷去的距离与偏移量

    2018-05-05

  • 单影1

    左闭右开

    查看全部
    0 采集 收起 来源：提取字符串substring()

    2018-05-05

  • 慕粉1233333

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>计时器</title>

    <head>

    </head>

    <body>

    <form>

    <input type="text" id="count" />

    </form>

    <script type="text/javascript">

      var num=0;

      function startCount() {

        document.getElementById('count').value=num;

        num+=1;

    setTimeout(startCount,1000);

      }

      startCount();

    </script>

    </body>

    </html>


    查看全部
    0 采集 收起 来源：计时器setTimeout()

    2018-05-04

  • 慕粉1233333

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>计时器</title>

    <script type="text/javascript">

       function clock(){

          var time=new Date();                  

          document.getElementById("clock").value = time;

       }

         var i = setInterval(clock,100);

       function mm(){

           i = setInterval(clock,100);

       }

    </script>

    </head>

    <body>

      <form>

        <input type="text" id="clock" size="50"  />

        <input type="button" value="Stop" onclick="clearInterval(i)"/>

        <input type="button" value="Start" onclick="mm()">

      </form>

    </body>

    </html>


    查看全部
    0 采集 收起 来源： 取消计时器clearInterval()

    2018-05-04

  • 慕小大姐

    点三次才能全部删除

    查看全部
    0 采集 收起 来源：删除节点removeChild()

    2018-05-04

  • 慕小大姐

    插入子节点

    父节点.insertBefore（新节点，指定此节点前插入节点） 

    查看全部
    0 采集 收起 来源：插入节点insertBefore()

    2018-05-04

  • 慕小大姐

    先创建节点 

    在赋值

    最后插入

    查看全部
    0 采集 收起 来源：插入节点appendChild()

    2018-05-04

  • 慕粉1233333

    <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 数组对象

    2018-05-04

  • 慕小大姐

    360浏览器出来的就是undefined

    查看全部
    0 采集 收起 来源：访问父节点parentNode

    2018-05-04

首页上一页813814815816817818819下一页尾页

举报

0/150
提交
取消
开始学习
课程须知
你需要具备HTML、css基础知识，建议同学们也可以想学习下js入门篇，快速认识js，熟悉js基本语法，更加快速入手进阶篇！
老师告诉你能学到什么？
通过JavaScript学习，掌握基本语法，制作简单交互式页面
友情提示：

您好，此课程属于迁移课程，您已购买该课程，无需重复购买，感谢您对慕课网的支持！

查看已购买的课程