JS-内置对象&内置构造函数&事件-拖拽轮播图无缝滚动

内置对象&内置构造函数

日期时间格式

// 创建一个当前时刻的日期时间对象
var date = new Date();
// 获取date对象中的年月日时分秒
var y = date.getFullYear();
var m = date.getMonth() + 1;
var d = date.getDate();
var h = date.getHours();
var i = date.getMinutes();
var s = date.getSeconds();
// 对个位数前面补 0
m = m < 10 ? '0' + m : m;
d = d < 10 ? '0' + d : d;
h = h < 10 ? '0' + h : h;
i = i < 10 ? '0' + i : i;
s = s < 10 ? '0' + s : s;
// 拼接日期时间的字符串
var datetimeStr = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
document.write(datetimeStr);

处理为小驼峰形式

console.log(toCamelCase('get-element-by-id'));
console.log(toCamelCase('query-selector-all'));
console.log(toCamelCase('get-bounding-client-rect'));

/**
         * 把 - 格式的字符串转为小驼峰风格
         * @param string -风格的字符串
         * @return string 小驼峰风格的字符串
        */
function toCamelCase(str) {
   
    return str.split('-').map(function(item, index) {
   
        // 如果是第一个元素
        if (index === 0) {
   
            return item;
        }
        // 首字母大写
        return item[0].toUpperCase() + item.slice(1);
    }).join('');
}

Math

// 取随机数,结果是小数0-1之间(顾头不顾尾,0有一定概率)
console.log(Math.random());
// 随机0-9之间的整数*10 舍一取整
console.log('随机0~9之间的整数：',Math.floor(Math.random()*10));
// 随机0-15之间的整数
console.log('随机0~15之间的整数：', Math.floor((Math.random() * 16)));
// 随机8-27之间的整数 先取0-19，再+8
console.log('随机取 8 ~ 27 之间的整数：', Math.floor(Math.random() * 20) + 8);

Array

// 定义数组
       var users = [
           {
               name: '芳芳',
               age: 18,
               address: '上海'
           },
           {
               name: '大悲',
               age: 78,
               address: '山洞'
           },
           {
               name: '曹操',
               age: 48,
               address: '许昌'
           },
           {
               name: '吕布',
               age: 38,
               address: '包头'
           },
           {
               name: '曹丕',
               age: 12,
               address: '许昌'
           },
           {
               name: '小悲',
               age: 31,
               address: '山洞'
           }
       ];
       console.log(users);

       // forEach遍历数组
       users.forEach(function(item, index) {
           console.log(item, index);
       });

       // filter 获取用户中的成年人
       var fUsers = users.filter(function(item, index) {
           return item.age >= 18;
       });
       console.log(fUsers);

       // map 从原数组提取信息，得到新数组，年龄+1岁
       var mUsers = users.map(function(item, index) {
           // return item.name;
           item.age ++;
           return item;
       });
       console.log(mUsers);

       // every  有一个不满足添加就是false 是否所有的用户都是成年人 
       var res = users.every(function(item, index) {
          return item.age >= 18;
       });
       console.log(res);   //false

       // some  有一个满足条件，就是true  是否有用户住在山洞
       var res = users.some(function(item, index) {
           return item.address === '山洞';
       });
       console.log(true);  //true

       // reduce （reduceright）计算所有元素的和（上一个元素的返回值，当前的，索引）
       var nums = [100,200,300,400];
       var sum = nums.reduce(function(prev, item, index) {
           return prev + item;
       }, 0);
       console.log(sum);   //1000

       // users ， 计算所有用户的年龄和
       var ageSum = users.reduce(function(prev, item) {
           return prev + item.age;
       }, 0);
       console.log(ageSum);   //231

       // users.reduceRight()

       // indexOf() lastIndexOf() -1不包含 >=1就是包含（索引）
         // indexOf() lastIndexOf()
         console.log(nums.indexOf(400));   //3
       console.log(nums.indexOf(4000));    -1

倒计时案例

// 获取一个DOM对象
        var boxNode = document.getElementById('box');
        // 定义数字
        var num = 10;
        // 调用函数 runTime
        runTime();
        // 定义函数
        function runTime() {
   
            // num 累减
            num --;
            // 设置元素中的内容
            boxNode.innerHTML = num;
            // 如果 nun<= 0
            if (num <= 0) {
   
                return;
            }
            // 开启单次定时器
            setTimeout(runTime, 1000);

        }

电子时钟

// 获取 id 是watch 的元素
        var watch = document.getElementById('watch');
        // 开启之前，先调用
        getDateTime();
        // 开启定时器
        setInterval(getDateTime,1000)
        // 定义定时器的回调函数，获取当前日期时间
        function getDateTime() {
   
            // 创建此时此刻的日期时间对象
            var date = new Date();
            // 从日期时间对象中获取年月日时分秒
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            var d = date.getDate();
            var h = date.getHours();
            var i = date.getMinutes();
            var s = date.getSeconds();
            // 如果个位为前面补0；
            m < 10 ? '0' + m : m;
            d < 10 ? '0' + d : d;
            h < 10 ? '0' + h : h;
            i < 10 ? '0' + i : i;
            s < 10 ? '0' + s : s;
            // 拼接字符串
            var datetimestr = y+'-'+m+'-'+d+'-'+h+':'+i+':'+s
            // 把字符串显示在元素中
            watch.innerHTML = datetimestr;
        }  

全选和全不选

// 获取所有的checkbox元素
        var inputs = document.querySelectorAll('#checkboxList input');
        // 获取全选按钮元素
        var selectAllBtn = document.querySelector('#btn1');
        // 点击全选按钮，执行操作
        selectAllBtn.onclick = function() {
   
            // 遍历出每个复选框元素
            inputs.forEach(function(input){
   
                input.checked = true;
            })
        }
        // 获取全不选的元素
        var selectNotAllBtn = document.querySelector('#btn2');
        // 点击全不选按钮，执行操作
        selectNotAllBtn.