1. Johngo学长首页
  2. 技术点详细复盘专题
  3. 人工智能

大四开始学前端|Javascript

• 人工智能 • 阅读 96

绑定事件

大四开始学前端|Javascript

通过变量获取输入值

或者通过函数获取

大四开始学前端|Javascript

还有引入外部文件

大四开始学前端|Javascript

大四开始学前端|Javascript

大四开始学前端|Javascript

大四开始学前端|Javascript

猜数字小游戏

大四开始学前端|Javascript

不要小数Math.floor(Math.random()*100 )

var是可变参数

let也是可变

const是常量，不能变除非是对象

次数是可变次数

Dom操作

获得 输入的数字打印出来

大四开始学前端|Javascript 
猜数字

         html{
        font-family:sans-serif;
        }
        body{
        width: 50%;
        max-width:800px;
        min-width:480px;
        margin:0 auto;
        }
        .lastResult{
        color: white;
        padding:3px;
        }

        请猜数：

            //let randomNumber=Math.random()
            let randomNumber=Math.floor(Math.random()*100 )
            const guesses =document.querySelector('.guesses')
            const lastResult =document.querySelector('.lastResult')
            const lowOrHi= document.querySelector('.lowOrHi')
            const guessSubmit=document.querySelector('.guessSubmit')
            const guessField=document.querySelector('.guessField')

            let guessCount=1

            guessSubmit.addEventListener('click',checkGuess)
            function checkGuess(){
                console.log('hi'+randomNumber)
                guessCount++
                const guessNumber=guessField.value
                console.log(guessNumber)
                if(guessNumber==randomNumber){
                    lastResult.textContent='great!猜对了'
                    lastResult.style.color='green'
                }else if(guessCount>=10){
                    lastResult.textContent='游戏结束'
                    lastResult.style.color='red'
                }else{
                    lastResult.textContent='你错了'
                    lastResult.style.color='red'
                    if(guessNumber>randomNumber){
                        lowOrHi.textContent='高了'
                    }else{
                        lowOrHi.textContent='低了'
                    }
                }
                    guessField.value=''
                    guessField.focus()

            }
           // checkGuess()

===值和类型都要一样

大四开始学前端|Javascript

所以要类型转换

const guessNumber Number.parseInt(guessField.value)

大四开始学前端|Javascript

guessField.value=”

guessField.focus()

每次清空和保持focus

Javascript实战之计算器

我们了解到有两种的盒模型，从内到外是content（实际内容包括文本&图像），padding（内边距，清除内容周围的区域，透明且不为负），border（围绕内边距padding的n条线，由width、color、style3部分组成）margin（外边距， 在元素外的额外的空白距离区域，此区域不能放其他元素）

网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模型都具备这些属性。这些属性和我们日常生活中盒子的属性是一样一样的。内容就是盒子里面装的东西；而填充就是怕盒子里的东西损坏而添加的抗震材料；边框就是指盒子本身了；至于边界则说明盒子之间要留一定的空隙，保持通风。

默认的w3c盒模型

会把元素显得更大，我们设定width为200px，在浏览器打开元素大小会是240px

因为在此盒模型中盒子总宽度是=wiidth+padding+border

也就是你代码写的width只规定了内容宽度，盒子元素宽度还会加上padding和border

IE盒模型又称 怪异的盒子模型(border-box)

width属性是指整个盒子元素的大小，要是另外指定padding和border会压文字大小，

设置的padding和border不会改变盒子的大小，相反的是内容区的高度会随之而改变

如何区分IE盒模型和标准盒模型？？

大四开始学前端|Javascript

有点道理，后来我又看到了了一个解释是关于ie盒模型坑王的故事

大意就是如果你数学和我一样不好老是算错，那可就不适合用ie盒模型，因为如果你padding+border>设置的width,那怎么办呢，显示负数？还是显示0，0不就把盒子撑大了吗？难道·世界上有很多像我一样算不明白的人，所以本来正常的模型硬生生成为了怪异盒模型？？

我们首先用IE盒子模型做出计算器骨架


            计算器

            0

            C
            +/-
            %
            /
            7
            8
            9
            *
            4
            5
            6
            -
            1
            2
            3
            +
            0
            .
            =

用css完成排版

/* 样式重置 */
*{
    margin:0;
    padding: 0;
    box-sizing: border-box;
}
.calculate {
    width: 100vw;
    height: 100vh;
    background-color: #f8f7ff;
    border-radius: 20px;
    box-shadow: 3px 3px 4px rgba(183, 172, 228, 0.8);
    padding: 48px 20px 0;
    display: grid;
    grid-template-rows: 30px 145px 1fr;
    gap: 20px;

}
.calculate .header {
    font-size: 0.8em;
    color: #696673;
}

.calculate .diaplay-area {
    justify-self: end;
    align-self: end;
    display: flex;
    flex-direction: column;
    align-items: flex-end;

}
.calculate .diaplay-area .equation{
    font-size: 10px;
    color: #cec8e0;
    font-weight: bold;
}
.calculate .diaplay-area .result{
    font-size: 47px;
    font-weight: bold;
    color: #80779a;
}
.calculate .keyboard-area {
    display: grid;
    grid-template-rows: repeat(5,1fr);
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    /* height: calc(100vw+50px); */
    width: calc(100vw+40px);
}
.keyboard-area .key {
    width: 100%;
    height: 100%;
    background-color:rgba(255,255,255,1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    /* box-shadow: 2px 2px 2px; */
    box-shadow: 2px 2px 6px rgba(198,193,216,0.42),
    inset 1px 6px 6px rgba(198,193,216,0.42),
    inset -6px -6px 6px rgba(77,120,185,0.22);
    font-size: 20px;
    color: #7b7379;
    font-weight: bold;

}
.keyboard-area .key.equal{
    grid-column-start: 3;
    grid-column-end: 5;
    background-color: rgba(155, 127,245);
    color: #fff;

}
.keyboard-area .key.plus{

    background-color: rgba(155, 127,245);
    color: #fff;

}
.keyboard-area .key.minus{

    background-color: rgb(73, 27, 224);
    color: #fff;

}
.keyboard-area .key.multiple{

    background-color: rgb(176, 34, 187);
    color: #fff;

}
.keyboard-area .key.division{

    background-color: rgb(136, 156, 97);
    color: #fff;

}
.keyboard-area .key:active{
    box-shadow: inset 0 0 3px rgba(77,120,185,0.22);
}

然后我们要配合js动态实现键盘


            计算器

            0


const keyboardList=[
    {type:'command',value:'clear',label:'C'},
    {type:'command',value:'toggle-minus',label:'+/-'},
    {type:'command',value:'percentage',label:'%'},
    {type:'operation',value:'division',label:'+'},
    {type:'number',value:'7',label:'7'},
    {type:'number',value:'8',label:'8'},
    {type:'number',value:'9',label:'9'},
    {type:'operation',value:'multiple',label:'x'},
    {type:'number',value:'4',label:'4'},
    {type:'number',value:'5',label:'5'},
    {type:'number',value:'6',label:'6'},
    {type:'operation',value:'minus',label:'-'},
    {type:'number',value:'1',label:'1'},
    {type:'number',value:'2',label:'2'},
    {type:'number',value:'3',label:'3'},
    {type:'operation',value:'plus',label:'+'},
    {type:'number',value:'0',label:'0'},
    {type:'command',value:'.',label:'.'},
    {type:'command',value:'equal',label:'='}
]
const keyboardElement = document.querySelector('#keyboard-area')
buildKeyboard()
function buildKeyboard(){
    keyboardList.forEach(item=>{
        const element =document.createElement('div')
        element.dataset.type=item.type
        element.dataset.value=item.value
        element.classList.add('key')
        element.classList.add(item.value)
        element.textContent=item.label
        element.addEventListener('click',clickKey)
        keyboardElement.appendChild(element)
    })
}

大四开始学前端|Javascript

编写实现函数：由command operation number三种键组成，每种都会有对应的函数

首先来看command函数，把对应功能的实现，c对应clear，+/-对应正负切换，%对应除以100，.对应小数点要注意小数点只加一次，equal最后实现

function clickKey(e){
    const dataset=e.target.dataset
    switch(dataset.type){
        case 'command':handleCommand(dataset.value);break;
        case 'operation':handleOperation(dataset.value);break;
        case 'number':handleNumber(dataset.value);break;
        default:throw new Error('当前类型不存在')
    }

}
const resultElement=document.querySelector('#result')
function handleCommand(value){
    switch(value) {
        case 'clear':resultElement.textContent='0';break;
        // case 'toggle-minus': resultElement.textContent= - Number.parseFloat(resultElement.context);break;
        case 'toggle-minus':resultElement.textContent =-Number.parseFloat(resultElement.textContent);break;
        case 'percentage': resultElement.textContent=Number.parseFloat(resultElement.textContent)/100;break;
        // case '.':resultElement.textContent.indexOf('.')!==-1||(resultElement.textContext+='.');break;
        case'.':resultElement.textContent.indexOf('.')!==-1||(resultElement.textContent +='.');break;
        case 'equal': ;break;
        default: throw new Error('命令不存在')
    }
}

再看数字，是0就不能出现0000的情况

function handleNumber(value){
    if(resultElement.textContent==='0'){
        resultElement.textContent=value
        isLastKeyOperation=false
    }else{
        resultElement.textContent+=value
    }
}

大四开始学前端|Javascript 
let lastNumber=0;
let lastOperation='';
let isLastKeyOperation=false;
function handleOperation(value){
    lastNumber=Number.parseFloat(resultElement.textContent)
    lastOperation=value
    isLastKeyOperation=true;
}
//对应的数字也要改变
====》
function handleNumber(value){
    if(resultElement.textContent==='0'||isLastKeyOperation){
        resultElement.textContent=value
        isLastKeyOperation=false
    }else{
        resultElement.textContent+=value
    }
}

最后是等号功能的实现用calculate

function calculate(value){
    let result=''
    switch(lastOperation){
        case 'plus':result=lastNumber+operationNumber;break;
        case 'minus':result=lastNumber-operationNumber;break;
        case 'multiple': result=lastNumber*operationNumber;break;
        case 'division': result=lastNumber/operationNumber;break;
        default:throw new Error("操作不存在");
    }
    resultElement.textContent= result
    lastNumber= result
}

Original: https://blog.csdn.net/m0_46106931/article/details/127494999
Author: Neveah Chen
Title: 大四开始学前端|Javascript

原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/654964/

转载文章受原作者版权保护。转载请注明原作者出处！

赞 (0)
0

【自取】最近整理的，有需要可以领取学习：



Linux核心资料大放送~

全栈面试题汇总（持续更新&可下载）

一个提高学习100%效率的工具！

【超详细】深度学习面试题目！

LeetCode Python刷题答案下载！

LeetCode Java版刷题答案下载！

LeetCode C++ 版本，抓紧保存！

LeetCode GO语言 刷题答案下载！

大家都在看

亲爱的 Coder【最近整理，可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球