Seasons123 / blog-FE

web前端相关issue is my blog :lollipop:
2 stars 0 forks source link

2017携程BST(转) #62

Closed Seasons123 closed 6 years ago

Seasons123 commented 6 years ago

BOM对象的三种系统对话框

1.alert() 2.

// confirm('Are you a student?')
if(confirm('Are you a student')) {
    console.log(true);
} else {
    console.log(false);
}

3.

// prompt(), 参数有两个,第二个可选。
// 第一个参数显示给用户的提示信息,第二个参数是文本输入域的默认值
var result = prompt('Please write your name:' + 'Amy'); 
var result2 = prompt('Please write your name:'); 
if(result2 !== null) {
    console.log(result2);
}
Seasons123 commented 6 years ago

==和===的区别

'=='会转型。 '==='不会转型。

0 == '0' // true
0 === '0' // false
Seasons123 commented 6 years ago

Date类型

Date.parse('1900-01-19');

// -2207433600000

创建一个日期对象, var now = new Date(), 新对象自动获得当前时间和对象。

如果想根据指定日期和时间的话,就必须传入该日期的毫秒数(从UTC时间1970年1月1日起)。 Date.parse('May 25, 2004'), 转成毫秒数。 (UTC时间) Date.UTC(2005, 4, 5, 17, 55, 55), 转成毫秒数。2005-05-05-17-55-55。(GMT时间) new Date()会模仿上面2种方法,也就是说可以直接向Date()构造函数传入上面两种参数的一种。 但是有一点儿区别,new Date()模仿的时候,都是根据UTC(世界协调时间)时间创建的,而非GMT(格林尼治标准时间)创建。

Seasons123 commented 6 years ago

CSS3 transition-timing-function使用参考指南 语法: `transition-timing-function : ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(,

, , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic- bezier(, , , )]*` 相关属性 :transition-property, transition-duration, transition-delay 取值: ``` ease: ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). linear: linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). ease-in: ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). ease-out: ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0). ease-in-out: ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) cubic-bezier: 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则 无效。 ``` 说明: 此时间函数使用的是贝塞尔曲线。
Seasons123 commented 6 years ago
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="buttonList">
        <input type="button" value="20">
        <input type="button" value="10">
        <input type="button" value="30">
        <input type="button" value="90">
        <input type="button" value="80">
        <input type="button" value="30">
        <input type="button" value="70">
        <input type="button" value="60">
        <input type="button" value="40">
        <input type="button" value="50">
    </div>
</body>
<script>

// 要求:
// 1. 实现排序
// 2. 实现go函数
// 3. 讨论优化

// 排序的思路:
// 1. 将要拷贝的数据单独拷贝一份
// 2. 将拷贝的数据进行排序
// 3. 将排序好的数据进行appendChild(), 如果存在,就会修改它的位置
(function() {
    var btnList = document.getElementById('buttonList');            
    var btns = btnList.getElementsByTagName('input');
    var fakeArr = [];

    for(var i = 0;i < btns.length;i++) {
        fakeArr[i] = btns[i];
    }

    // 要么使用内置的api
    // fakeArr.sort(function(b1, b2) {
    //  return b1.value - b2.value;
    // });

    // 要么使用排序算法
    for(var i = 0;i < fakeArr.length - 1;i++) {

        for(var j = i + 1;j < fakeArr.length;j++) {

            if(fakeArr[i].value > fakeArr[j].value) {
                var temp = fakeArr[i];
                fakeArr[i] = fakeArr[j];
                fakeArr[j] = temp;
            }
        }
    }

    for(var i = 0;i < fakeArr.length;i++) {
        btnList.appendChild(fakeArr[i]);
        // console.log(fakeArr[i]);
    }

    for(var i = 0;i < btns.length;i++) {
        btns[i].onclick = function() {
            go(this);
        }
    }

    function go(v) {
        var value = v.value;
        var timer = setInterval(function() {

            if(value <= 0) {
                clearInterval(timer);
            } else {
                value--;
                v.value = value;
            }
        }, 1000);
    }
})();

</script>
</html>

效果:

1