duyuhe / blog Goto Github PK

<div id=edit contenteditable=true designmode=on></div>

//让元素可编辑是HTML5的属性，值可以不加双引号
<input type=button id=bold value=B>
<input type=button id=italic value=i>
<input type=button id=underline value=U>
<input type=button id=createlink value=a>

    document.execCommand(“命令”，false，值（或Null）)；第二个参数设置false是为了兼容性

$(document).ready(function(){
        function doExec(fx, extra) {
                 document.execCommand(fx, false, extra);
        }
       $(“#bold”).click( function() {
                 doExec(“bold”, ““);
       });
       $(“#italic”).click( function() {
                 doExec(“italic”, ““);
        });
        $(“#underline”).click( function() {
                doExec(“underline”, ““);
        });
        $(“#createlink”).click( function() {
                 var xtra = prompt(“Enter a URL:”, “http://”);
                 doExec(“createlink”, xtra);
         });
});

             <form action="_.php" >
                        <textarea name="textarea"></textarea>
                        <input type="submit"  value="完成提交" />
            </form>

              form.onsubmit =function(){
                        /*  用户是看不见textarea的，但是服务器可以看到 */
                        textarea.value = edit.innerHTML;
             }

var timer=window.setTimeout(func,[delay，param]);

setTimeout(function(){ greet(randomGreeting);}, 1000);

setTimeout(greet, 1000, randomGreeting);

var person = {
  firstName: "Jim",
  introduce: function(){
    console.log("Hi, I'm " + this.firstName);
  }
};

person.introduce();
// Outputs: Hi, I'm Jim

setTimeout(person.introduce, 50);
// Outputs: Hi, I'm undefined

setTimeout(person.introduce.bind(person), 50);
// Outputs: Hi, I'm Jim

setTimeout($.proxy(person.introduce, person), 50);
// Outputs: Hi, I'm Jim

$( "button" ).click(function() {
  // 元素隐藏.8s之后再渐显
  $( "div.first" ).slideUp( 300 ).delay( 800 ).fadeIn( 400 );
});

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="-1">

<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" /> 

<meta name="google" value="notranslate">`

<meta content="telephone=no" name="format-detection"/>

var [day, month, date, year] = Date().split(' ');

f = function(x, y=1) {console.log(x,y)};
f(22);
// 22 1

f = function(x,y,z, ...a) { console.log(a) }
f(1,2,3,7,8,9,'a','b','c');
// 7 8 9 'a' 'b' 'c'

f = (x) => x*x

f = function () {
    let n=1;
    for (let n=5,i=0; i<n; i++) {
        console.log(i);
    }
    console.log(n);
};
f();
// 0 1 2 3 4 1

f = function() {
    const two = 2;
    two = 5;
    console.log(two);
}
f();

var point = {x:1};
var w = {set: function(t,p,v) {
                console.log(p,v);
            }
        };
p = Proxy(point, w);
p.x = 2;
// prints 'x 2', but doesn't change p.x

s = new Set();
[2,3,5,4,5,2,2].map(x => s.add(x))
for (i of s) {console.log(i)}
// 2 3 4 5

m = new Map();
o = {passwd: "my name is my password"};
m.set(o, "content")
console.log(m.get(o))
// "content"

nums = function () {yield 1; yield 2; yield 3;}
for (i of nums()) {console.log(i)}
// 1 2 3

a = [1,2,3,4]
a.sparse = false

for (t of a) {
    console.log(t)
}
// 1 2 3 4

一：鼠标光标只有一点；而触摸点有很多
二：鼠标光标可以悬停；而触摸点不可以

canvas.ontouchstart=function(e){}

canvas.addEventListener("touchstart",function(e){});

1. length 
         canvar.ontouchstart =function(e){
              var  len= e.touches.length,  //  触摸点的个数
                    first = e.touches[0]；    //  可以使用下标获取第N个触摸点
         }

 2. identifier  返回每个Touch对象的独特标识符，比如想了解某一个触摸点是否参与多个事件

   canvar.ontouchstart =function(e){
              var first = e.touches[0].pageX；    
              // 或者 
              var last = e.changedTouches[0].pageX;
              ... ...
   }

   只使用上述事件配合事件属性：
          touchstart/touchmove        ... ... 
          touches/changedTouches  ... ...
   又或者使用以下提供的事件：

     大型框架不会消失:第四条

    ReactJS ... ...

@media screen and (min-width:600px){
      /* code */
}

// 第一种
if(document.documentElement.clientWeight >= 600){
      //  code
}
// 第二种
if(window.matchMedia("(min-width:600px)").matches){
      //  code
}

@color :red;
body{color:@color;} => body{color:red;}

.base{color:red}
.box{background:green; .base;} =>.box{background:green;color:red;}

.base(@color){color:@color;}
.box{background:green; .base(red);} =>.box{background:green;color:red;}

.base(@color:red){color:@color;}
.box{background:green; .base();} =>.box{background:green;color:red;} 
另一种自定义 ：.box{background:green; .base(gray);} =>.box{background:green;color:gray;}

body{
       header{
              p{color:red;}
       }
}

a{
   color:red;
   &:hover{color:pink;}
}

@color :#f00;
.base{color:@color -20;} =>转换成rgb（0-255），再转换成十六进制

.base(5px,solid,red){
       border:@arguments;
}

.base{color:~'这里面的内容会原文输出';}