大四开始学前端|Javascript

最新推荐文章于 2024-10-18 11:12:30 发布

Neveah Chen

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量450

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/m0_46106931/article/details/127494999

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

本文介绍了使用JavaScript实现猜数字小游戏的逻辑，包括获取用户输入、判断游戏状态和DOM操作。同时展示了计算器的布局和样式设计，以及如何结合JavaScript动态更新计算器显示。文章涵盖了变量、常量、事件监听、类型转换以及CSS盒模型等内容，提供了完整的代码示例。

摘要由CSDN通过智能技术生成

绑定事件

通过变量获取输入值

或者通过函数获取

还有引入外部文件

猜数字小游戏

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

var是可变参数

let也是可变

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

次数是可变次数

Dom操作

获得输入的数字打印出来

<title>猜数字</title>
     <style>
         html{
        font-family:sans-serif;
        }
        body{
        width: 50%;
        max-width:800px;
        min-width:480px;
        margin:0 auto;
        }
        .lastResult{
        color: white;
        padding:3px;
        }
        </style>
        </head>
        
        <div class="form">
        <label for="guessField'">请猜数：</label>
        <input type="text" id="guessField" class="guessField">
        <input type="submit" value="确定" class="guessSubmit">
        </div>
        <div class="resultParas">
        <p class="guesses"></p>
        <p class="lastResult"></p>
        <p class="lowOrHi"></p>
        </div>
        
        <script>
            //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()
        </script>

===值和类型都要一样

所以要类型转换

const guessNumber Number.parseInt(guessField.value)

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盒模型和标准盒模型？？

虽然说IE被称为异端，但是正常来说盒子的大小就该按他的整个来算呀，怎么还说人家是异端，后来我看到了这个解释

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

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

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

<body>
    <div class="calculate">
        <div class="header">
            计算器
        </div>
        <div class="diaplay-area">
            <!-- <div class="equation">3 * 2-2=</div> -->
            <div id="result" class="result">0</div>
        </div> 
<div id="keyboard-area" class="keyboard-area">
            <div class="key">C</div>
            <div class="key">+/-</div>
            <div class="key">%</div>
            <div class="key division">/</div>
            <div class="key">7</div>
            <div class="key">8</div>
            <div class="key">9</div>
            <div class="key multiple">*</div>
            <div class="key">4</div>
            <div class="key">5</div>
            <div class="key">6</div>
            <div class="key minus">-</div>
            <div class="key">1</div>
            <div class="key">2</div>
            <div class="key">3</div>
            <div class="key plus">+</div>
            <div class="key">0</div>
            <div class="key">.</div>
            <div class="key equal" >=</div>
 </div>
</div>

用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动态实现键盘

<body>
    <div class="calculate">
        <div class="header">
            计算器
        </div>
        <div class="diaplay-area">
            <!-- <div class="equation">3 * 2-2=</div> -->
            <div id="result" class="result">0</div>
        </div>
        <div id="keyboard-area" class="keyboard-area">
    
        </div>
    </div>
    <script src="./js/main.js"></script>
</body>

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)
    })
}

编写实现函数：由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
    }
}

最后看操作符，要求99*88先把99存起来，然后清空99写88而非写9988

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
}