全栈组第二次任务——js基础(网页时钟, 随机谚语, 计算器)

1.网页时钟

思路: 获取电脑当前的时间戳, 再用用字符串拼接的方式把数字显示在页面上。

JS代码如下:

let weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
function addZero(num) {
    if (num >= 10) {
        return num;
    }
    else {
        return "0" + num;
    }
}
let dateDom = document.getElementById("date");
let weekDom = document.getElementById("week");
let timeDom = document.getElementById("time");

//更新时间
function updateTime() {
    let now = new Date();
    let date = now.getFullYear() + "-" + addZero(now.getMonth() + 1) + "-" + addZero(now.getDate());
    let week = weekArr[now.getDay()];
    let time = addZero(now.getHours()) + ":" + addZero(now.getMinutes()) + ":" + addZero(now.getSeconds());

    setText(dateDom, date);
    setText(weekDom, week);
    setText(timeDom, time);
}
function setText(dom, text) {
    dom.innerText = text;

}
setInterval(updateTime, 1000);//每秒更新一次
updateTime();

 效果图将会在后面给出。

2.随机谚语

思路: 把谚语内容放在一个数组里面, 再生成随机数来随机取出对应的内容, 设置按下刷新按键和浏览器页面的刷新键来生成随机谚语。

JS代码如下:

const p = document.querySelector('.saying p');
let span = document.querySelector('.saying span');
let refresh = document.querySelector('.refresh');
let content = document.querySelector('.content');
let author = document.querySelector('.author');

let sayingArr = [{ "content": "大家都是夜空中的飞行员, 抚慰孤独的是月亮", "author": "KKKiss_sky" },
{ "content": "清醒是一种细小而有耐性的英雄主义", "author": "麦克尤恩" },
{ "content": "一个人只拥有此生此世是不够的, 他还应该拥有诗意的世界", "author": "王小波" },
{ "content": "一个能够升起月亮的身体, 必然驮住了无数次日落", "author": "余秀华" },
{ "content": "人生的旅程就是这样, 用大把时间迷茫, 在几个瞬间成长", "author": "瑞卡斯" },
{ "content": "这个世界是唯一的, 人都要回家, 都要用布把星星盖好然后把灯碰亮", "author": "顾城" },
{ "content": "愿所有梦见过远方的人, 心有惊雷, 生似静湖", "author": "蔡崇达" },
{ "content": "我们的忧愁将会崩解, 灵魂将会穿梭如风", "author": "聂鲁达" },
{ "content": "嫉妒、抱负、自私或慷慨, 各有一方宇宙", "author": "加缪" },
{ "content": "现在的人不快乐, 是因为我们和别人越来越贴近, 却和自己越来越疏远", "author": "朱德庸" },
{ "content": "他认识了自己是如何的脆弱, 没有向善的决心, 也没有作恶的勇气", "author": "茅盾" },
{ "content": "所有的改变都是一种深思熟虑过后的奇迹, 每个瞬间奇迹都在发生", "author": "梭罗" },
{ "content": "不能听命与自己者, 就要受命于他人", "author": "尼采" },
]

let num = randomNum(0, sayingArr.length - 1);
refresh.onclick = function newquote() {
    let num = randomNum(0, sayingArr.length - 1);
    p.innerHTML = sayingArr[num].content;
    span.innerHTML = sayingArr[num].author;

}

p.innerHTML = sayingArr[num].content;
span.innerHTML = sayingArr[num].author;


function randomNum(min, max) {
    return min + Math.floor(Math.random() * (max - min));
}

function setText(dom, text) {
    dom.innerHTML = text;
}

效果图如下:

3.计算器

思路: 先获取对应按键, 并设置对应的功能, 最后使用JS中内置的eval()函数来进行数据的运算。

JS代码如下:

let numbers = document.querySelectorAll('.number');
        let operators = document.querySelectorAll('.operator');
        let result = document.querySelector('.result');
        let AC = document.querySelector('.ac');
        let DEL = document.querySelector('.del');
        let dot = document.querySelector('.dot');
        let isdot = true;
        let flag = false;
        let equal = document.querySelector('.equal');
        let retreat = document.querySelector('retreat');

        let display = "";

        for (i = 0; i < numbers.length; i++) {
            let number = numbers[i];
            number.onclick = function () {
                if (flag) {
                    display = "";
                    display += this.innerHTML;
                    result.innerHTML = display;
                    flag = false;
                }
                else {
                    display += this.innerHTML;
                    result.innerHTML = display;
                }
            }
        }
        for (i = 0; i < operators.length; i++) {
            let operator = operators[i];
            operator.onclick = function () {
                display += this.innerHTML;
                result.innerHTML = display;
                isdot = true;
                flag = false;
            }
        }
        AC.onclick = function () {
            display = "";
            result.innerHTML = '0';
        }
        dot.onclick = function () {
            if (display == "") {
                display += '0.';
                result.innerHTML = display;
            }
            if (display == "00") {
                display = "0";
                result.innerHTML = display;
            }
            if (isdot) {
                display += ".";
                result.innerHTML = display;
            }
            isdot = false;
        }
        equal.onclick = function () {
            display = eval(display);
            result.innerHTML = display;
            flag = true;
        }

        DEL.onclick = function () {
            let str = result.innerHTML.substr(0, result.innerHTML.length - 1);
            result.innerHTML = str;
            display = result.innerHTML;
        }

效果图如下: