js day07 时间对象 获取本地时间 秒杀倒计时 字符串方法

一, 时间对象和字符串方法

1, 时间对象

使用时间对象，在不写入参数的情况下，可以获取电脑当前这1秒钟的本地时间

时间对象是一个内置函数,可以直接拿过来使用，是在js底层已经定义好的

Number()  数值
String() 字符串
Boolean() 布尔
Object() 对象
Array() 数组
Function(){}  函数  
Date() 时间
Error() 错误
RegExp（）正则

2, 获取本地时间

语法：

// var d = new Date(); 

获取年月日

// 获取年月日
var y = d.getFullYear();
// 当前月份要加 + 1  1月到12月 对应下标值是0-11  
var m = d.getMonth() + 1;
var r = d.getDate();

console.log(y + '年' + m + '月' + r + '日');

时分秒

// 时分秒
var h = d.getHours();  // 小时
var f = d.getMinutes(); // 分钟
var s = d.getSeconds();   // 秒
console.log(h + '时' + f + '分' + s + '秒');

星期

// 星期 
var week = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
var w = d.getDay();
console.log(week[w]);

console.log(y + '年' + m + '月' + r + '日' + week[w] + h + '时' + f + '分' + s + '秒');

电子时钟

auto(); // 解决1秒的空白
setInterval(auto, 1000);
function auto() {
    // 获取本地时间
    var d = new Date(); // 

    // 获取年月日
    var y = d.getFullYear();
    // 当前月份要加 + 1  1月到12月 对应下标值是0-11  
    var m = d.getMonth() + 1;
    var r = d.getDate();

    // 时分秒
    var h = d.getHours();  // 小时
    var f = d.getMinutes(); // 分钟
    var s = d.getSeconds();   // 秒

    // 星期 
    var week = ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
    var w = d.getDay();

    document.querySelector('body').innerHTML = y + '年' + m + '月' + r + '日' + week[w] + h + '时' + f + '分' + s + '秒'
}

获取特定时间

console.log(d.toLocaleString());
console.log(d.toLocaleTimeString());
console.log(d.toLocaleDateString());

时间戳

// 时间戳  就是从1970年1月1号 凌晨零点 到现在这个时间的毫秒数
console.log(d.getTime()); // 1600741855080 数值类型  

// 2020年11月11号 - 2020年9月22  

console.log(Date.now()); // 1600742004734

设置未来时间

//  字符串
// 月份正常输入
var d1 = new Date('2020,11,11 11:11:11');
// console.log(d1.getTime()); //1605064271000
console.log(d1);

//直接输入时间   月份 - 1  
var d2 = new Date(2020,10,11,11,11,11);
console.log(d2);

时间计算

// 时间计算
var nowTime = new Date(); 
var endTime = new Date('2020,11,11 11:11:11'); 

var leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000); // 秒
console.log(leftTime / (24 * 60 * 60)); // 50

3, 秒杀倒计时

auto(); // 解决1秒的空白

setInterval(auto, 1000)

function auto() {
    // 设置本地时间
    var nowTime = new Date();
    // 设置未来时间
    var endTime = new Date('2020,11,11 11:11:11');

    // 把时间转化为时间戳，做时间的运算
    var leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);// 秒

    // 计算 天  时  分  秒 
    var t = parseInt(leftTime / (24 * 60 * 60));
    var h = parseInt((leftTime / (60 * 60)) % 24);
    var m = parseInt((leftTime / 60) % 60);
    var s = parseInt(leftTime % 60);

    document.body.innerHTML = '距离活动开始还有：' + two(t) + '天' + two(h) + '时' + two(m) + '分' + two(s) + '秒';
    // 如果活动结束
    if (leftTime <= 0) {
        document.body.innerHTML = '活动已经开始';
    }
}
// 补0
function two(n){
    return n >= 10 ? n : '0' + n; 
}

二, 字符串对象

字符串

使用单引号或者双引号引起来的都是字符串

1、使用字面量的方式

var str = '我爱吃大肘子';
var str = '10';
var str = "字符串"
var str = 中国; // 错误的

2、使用构造函数

// 使用构造函数创建字符串
var str = new String('abc');
console.log(typeof str);  // object
console.log(str[0]); // 下标
console.log(str.length); // 长度

// 可以直接使用构造函数

var str1 =String('123456');
console.log(typeof str1);  // string
console.log(str1[0]); // 下标
console.log(str1.length); // 长度

可以通过下标读取字符串

var str = 'abcdefg';

console.log(str[0]); // a
console.log(str.charAt(0)); // a 
console.log(str.charCodeAt(0)); // 97 

1, indexOf

语法：字符串.indexOf('查找的字符',index)

'查找的字符':在某一个字符串中需要查找的单个字符或者一串字符

index:是一个number类型，代表的是查找的起始位置，代表的下标值 取值范围 字符串的长度 - 1

如果查找到了，返回当前查找的字符在字符串中首次出现的位置（下标值）

如果没找到，返回 -1

console.log(str.indexOf('c')); //  2
// 返回值是第一个字符的下标
console.log(str.indexOf('cd')); // 2
// 所有的字符都是需要匹配的
console.log(str.indexOf('cD')); // -1
// 第二个参数是决定查找的位置
console.log(str.indexOf('c',3)); //  -1

2, 字符串去重

// 需求：去掉重复的，数字在前，字母在后

var str = '1233fddfd&3434fdsaff&454545&4545444rfdsfds&545gdsgs';
var num = ''; // 数字
var sum = ''; // 字母

// 先拿到每一个字符
for (var i = 0; i < str.length; i++) {
    var v = str[i]; // 每一个字符  v = '1' v = '2'
    // 数字 48 - 57
    if(v.charCodeAt(0)>=48 && v.charCodeAt(0)<=57 && num.indexOf(v) == -1){
        num+=v;
    }
    // 字母 97-122
    if(v.charCodeAt(0)>=97 && v.charCodeAt(0)<=122 && sum.indexOf(v) == -1){
        sum+=v;
    }
}

console.log(num + sum); //12345fdsarg

3, 查找多个字符

var str = '我就小王12是我颜色小王12不一样的小王12烟火';

// 找到所有的小王
console.log(str.indexOf('小王')); // 2
console.log(str.indexOf('小王', 4)); // 8
//循环查找
var n = str.indexOf('小王1'); // 2
while(n !==-1){
    console.log(n); // 2 
    n = str.indexOf('小王1', n + 3);
}
// 封装
fn(str, '小王12'); //函数调用
function fn(str, val) { // str 字符串  val 查找的字符
    var n = str.indexOf(val);
    while (n != -1) {
        console.log(n);
        n = str.indexOf(val, n + val.length);
    }
}

4, 查找某个字符在字符串中出现的次数

// 查找o出现的次数
var str = 'oabcdofrghoooooooooooodefklaoqwpo';
var n = str.indexOf('o');
var num = 0; // 计数

while (n != -1) {
    num++;
    n = str.indexOf('o', n + 1);
}
console.log(num);

5, lastIndexOf

语法：字符串.lastIndexOf('查找的字符',起始位置)

返回值和indexOf相同

indexOf是从前往后查找

lastIndexOf是从后往前查找

// 字符串.lastIndexOf('查找的字符', 起始位置)
var str = 'abcadeafag';

console.log(str.indexOf('a')); // 0
console.log(str.lastIndexOf('j')); // -1

console.log(str.lastIndexOf('a')); // 8

console.log(str.lastIndexOf('a',6)); // 6

6, 打印文件扩展名

// 1.2.3.4.txt
// console.log(fn('1.2.3.4.txt'));
console.log(fn('老韩.liumang'));

function fn(str) {

    var n = str.lastIndexOf('.'); // 7

    if (n != -1) {
        return str.slice(n + 1);
    } else {
        alert('无效的文件');
    }
}

7, 字符串的截取

语法：字符串.substring(起始位置，结束位置)

// 注意：包含开始  不包含结束

var str = 'abcdefg';
// 一个参数的时候，从当前位置一直到结束
console.log(str.substring(2)); //cdefg
// 当两个参数的时候，从开始位置到结束位置
console.log(str.substring(2,5)); // cde
// 当第一个参数大于第二个参数的时候，会自动交换位置
console.log(str.substring(5,2)); // cde
// 当第一个参数为负数的时候，会默认转换为 0 
console.log(str.substring(-2,5)); // abcde
// 当第二个参数为负数的时候，默认转换为 0 然后在自动交换位置
console.log(str.substring(5,-2)); //  abcde  

8, 语法：字符串.slice(起始位置，结束位置)

// 注意;包含开始 不包含结束

var str = 'abcdefg';
// 当一个参数的时候，从当前位置截取到末尾
console.log(str.slice(2)); // cdefg
// 当两个参数的时候，从起始位置截取到结束位置
console.log(str.slice(2,6)); // 
// 当第一个参数大于第二个参数的时候，不会自动交换位置
console.log(str.slice(6,2)); //  空
// 当第一个参数为负数的时候 起始位置的值  = 字符串的长度 + 负数
console.log(str.slice(-3,6)); // ef
// 当第二个参数为负数的时候 起始位置的值  = 字符串的长度 + 负数  
// 如果第二个参数小于第一个参数 不会自动交换为
console.log(str.slice(6,-3)); // 

9, 语法：字符串.substr(起始位置，截取的长度)

var str = 'abcdefg';
// 如果是一个参数，从当前位置截取到末尾
console.log(str.substr(2)); // cdefg
// 第二个参数是截取的长度
console.log(str.substr(2,5)); // cdefg 

案例 - 展开收缩

// 获取元素
var span = document.getElementsByTagName('span')[0];
var a = document.getElementsByTagName('a')[0];

var text = span.innerHTML; // 保存原数据
var tag = true; // 展开
// 添加事件

a.onclick = function () {
    if (tag == true) {
        span.innerHTML = span.innerHTML.substring(0, 18) + '...';
        a.innerHTML = '展开';
        tag = false;
    } else {
        span.innerHTML = text + '...';
        a.innerHTML = '收缩';
        tag = true;
    }
}

10, 字符串的切割

语法：字符串.split(切割的字符)

把字符串切割长数组，并返回这个数组

var str = '2020-9-22';

console.log(str.split('-'));
console.log(str.split(''));
console.log(str.split());


// 语法：数组.join(标识符)  把数组转换成字符串

var arr = ['刘备','张飞','关羽'];
console.log( typeof arr.join(','));

console.log(arr.join(''));

console.log(arr.join());

11, 替换内容

var str = '我是帅哥';
var arr = str.split('是'); //  ["我", "帅哥"]
var str1 = arr.join('不是');
console.log(str1);

12, 查找替换

// 获取元素
var pt = document.getElementsByTagName('input');
var div = document.getElementById('div1');

var text = div.innerHTML; // 保存原始数据

// 添加事件
pt[2].onclick = function(){

    // 获取输入框的内容
    var v1 = pt[0].value;
    var v2 = pt[1].value;
    // 分割字符串
    var arr = text.split(v1); // arr = [,'']

    // 当第一个框有内容 第二个框内内容
    if(v1 && !v2){
        // 查找
        div.innerHTML = arr.join('<span>' + v1 + '</span>');
    }else if(v1 && v2){
        // 替换
        div.innerHTML = arr.join('<span>' + v2 + '</span>');
    }
}

13, 去掉字符左右的空格

var str = '    字符         ';
console.log(str);
console.log(str.trim());

14, 转换大小写

'abc'.toUpperCase() // 大写
"ABC" 
"ABC".toLowerCase() // 小写
"abc"

15, 替换字符

语法：字符串.replace('被替换的字符','替换的字符')

var str = '138999999999';

console.log(str.replace('999999999','************'));