• 大四开始学前端|Javascript

    绑定事件

     通过变量获取输入值

    或者通过函数获取

     还有引入外部文件

     

     猜数字小游戏

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

    var是可变参数

    let也是可变

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

    次数是可变次数

    Dom操作

    获得 输入的数字打印出来

    1. 猜数字
    2.      <style>
    3.          html{
    4.         font-family:sans-serif;
    5.         }
    6.         body{
    7.         width: 50%;
    8.         max-width:800px;
    9.         min-width:480px;
    10.         margin:0 auto;
    11.         }
    12.         .lastResult{
    13.         color: white;
    14.         padding:3px;
    15.         }
    16.         style>
    17.         
    18.         
    19.         
    20.         
    21.         
    22.         
    23.

    • ===值和类型都要一样

    所以要类型转换

    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盒子模型做出计算器骨架

    1. <body>
    2.     <div class="calculate">
    3.         <div class="header">
    4.             计算器
    5.         div>
    6.         <div class="diaplay-area">
    7.             
    8.             <div id="result" class="result">0div>
    9.         div> 
    10. <div id="keyboard-area" class="keyboard-area">
    11.             <div class="key">Cdiv>
    12.             <div class="key">+/-div>
    13.             <div class="key">%div>
    14.             <div class="key division">/div>
    15.             <div class="key">7div>
    16.             <div class="key">8div>
    17.             <div class="key">9div>
    18.             <div class="key multiple">*div>
    19.             <div class="key">4div>
    20.             <div class="key">5div>
    21.             <div class="key">6div>
    22.             <div class="key minus">-div>
    23.             <div class="key">1div>
    24.             <div class="key">2div>
    25.             <div class="key">3div>
    26.             <div class="key plus">+div>
    27.             <div class="key">0div>
    28.             <div class="key">.div>
    29.             <div class="key equal" >=div>
    30.  div>
    31. div>

    用css完成排版

    1. /* 样式重置 */
    2. *{
    3.     margin:0;
    4.     padding: 0;
    5.     box-sizing: border-box;
    6. }
    7. .calculate {
    8.     width: 100vw;
    9.     height: 100vh;
    10.     background-color: #f8f7ff;
    11.     border-radius: 20px;
    12.     box-shadow: 3px 3px 4px rgba(183, 172, 228, 0.8);
    13.     padding: 48px 20px 0;
    14.     display: grid;
    15.     grid-template-rows: 30px 145px 1fr;
    16.     gap: 20px;
    17.    
    18. }
    19. .calculate .header {
    20.     font-size: 0.8em;
    21.     color: #696673;
    22. }
    23.  
    24. .calculate .diaplay-area {
    25.     justify-self: end;
    26.     align-self: end;
    27.     display: flex;
    28.     flex-direction: column;
    29.     align-items: flex-end;
    30.  
    31.  
    32. }
    33. .calculate .diaplay-area .equation{
    34.     font-size: 10px;
    35.     color: #cec8e0;
    36.     font-weight: bold;
    37. }
    38. .calculate .diaplay-area .result{
    39.     font-size: 47px;
    40.     font-weight: bold;
    41.     color: #80779a;
    42. }
    43. .calculate .keyboard-area {
    44.     display: grid;
    45.     grid-template-rows: repeat(5,1fr);
    46.     grid-template-columns: repeat(4,1fr);
    47.     gap: 10px;
    48.     /* height: calc(100vw+50px); */
    49.     width: calc(100vw+40px);
    50. }
    51. .keyboard-area .key {
    52.     width: 100%;
    53.     height: 100%;
    54.     background-color:rgba(255,255,255,1);
    55.     display: flex;
    56.     align-items: center;
    57.     justify-content: center;
    58.     border-radius: 20px;
    59.     /* box-shadow: 2px 2px 2px; */
    60.     box-shadow: 2px 2px 6px rgba(198,193,216,0.42),
    61.     inset 1px 6px 6px rgba(198,193,216,0.42),
    62.     inset -6px -6px 6px rgba(77,120,185,0.22);
    63.     font-size: 20px;
    64.     color: #7b7379;  
    65.     font-weight: bold;  
    66.  
    67. }
    68. .keyboard-area .key.equal{
    69.     grid-column-start: 3;
    70.     grid-column-end: 5;
    71.     background-color: rgba(155, 127,245);
    72.     color: #fff;
    73.  
    74. }
    75. .keyboard-area .key.plus{
    76.     
    77.     background-color: rgba(155, 127,245);
    78.     color: #fff;
    79.  
    80. }
    81. .keyboard-area .key.minus{
    82.     
    83.     background-color: rgb(73, 27, 224);
    84.     color: #fff;
    85.  
    86. }
    87. .keyboard-area .key.multiple{
    88.    
    89.     background-color: rgb(176, 34, 187);
    90.     color: #fff;
    91.  
    92. }
    93. .keyboard-area .key.division{
    94.    
    95.     background-color: rgb(136, 156, 97);
    96.     color: #fff;
    97.  
    98. }
    99. .keyboard-area .key:active{
    100.     box-shadow: inset 0 0 3px rgba(77,120,185,0.22);
    101. }

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

    1. <body>
    2.     <div class="calculate">
    3.         <div class="header">
    4.             计算器
    5.         div>
    6.         <div class="diaplay-area">
    7.             
    8.             <div id="result" class="result">0div>
    9.         div>
    10.         <div id="keyboard-area" class="keyboard-area">
    11.     
    12.         div>
    13.     div>
    14.     <script src="./js/main.js">script>
    15. body>
    1. const keyboardList=[
    2.     {type:'command',value:'clear',label:'C'},
    3.     {type:'command',value:'toggle-minus',label:'+/-'},
    4.     {type:'command',value:'percentage',label:'%'},
    5.     {type:'operation',value:'division',label:'+'},
    6.     {type:'number',value:'7',label:'7'},
    7.     {type:'number',value:'8',label:'8'},
    8.     {type:'number',value:'9',label:'9'},
    9.     {type:'operation',value:'multiple',label:'x'},
    10.     {type:'number',value:'4',label:'4'},
    11.     {type:'number',value:'5',label:'5'},
    12.     {type:'number',value:'6',label:'6'},
    13.     {type:'operation',value:'minus',label:'-'},
    14.     {type:'number',value:'1',label:'1'},
    15.     {type:'number',value:'2',label:'2'},
    16.     {type:'number',value:'3',label:'3'},
    17.     {type:'operation',value:'plus',label:'+'},
    18.     {type:'number',value:'0',label:'0'},
    19.     {type:'command',value:'.',label:'.'},
    20.     {type:'command',value:'equal',label:'='}
    21. ]
    22. const keyboardElement = document.querySelector('#keyboard-area')
    23. buildKeyboard()
    24. function buildKeyboard(){
    25.     keyboardList.forEach(item=>{
    26.         const element =document.createElement('div')
    27.         element.dataset.type=item.type
    28.         element.dataset.value=item.value
    29.         element.classList.add('key')
    30.         element.classList.add(item.value)
    31.         element.textContent=item.label
    32.         element.addEventListener('click',clickKey)
    33.         keyboardElement.appendChild(element)
    34.     })
    35. }

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

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

    1. function clickKey(e){
    2.     const dataset=e.target.dataset
    3.     switch(dataset.type){
    4.         case 'command':handleCommand(dataset.value);break;
    5.         case 'operation':handleOperation(dataset.value);break;
    6.         case 'number':handleNumber(dataset.value);break;
    7.         default:throw new Error('当前类型不存在') 
    8.     }
    9.  
    10. }
    11. const resultElement=document.querySelector('#result')
    12. function handleCommand(value){
    13.     switch(value) {
    14.         case 'clear':resultElement.textContent='0';break;
    15.         // case 'toggle-minus': resultElement.textContent= - Number.parseFloat(resultElement.context);break;
    16.         case 'toggle-minus':resultElement.textContent =-Number.parseFloat(resultElement.textContent);break;
    17.         case 'percentage': resultElement.textContent=Number.parseFloat(resultElement.textContent)/100;break;
    18.         // case '.':resultElement.textContent.indexOf('.')!==-1||(resultElement.textContext+='.');break;
    19.         case'.':resultElement.textContent.indexOf('.')!==-1||(resultElement.textContent +='.');break;
    20.         case 'equal': ;break;
    21.         default: throw new Error('命令不存在')
    22.     }
    23. }

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

    1. function handleNumber(value){
    2.     if(resultElement.textContent==='0'){
    3.         resultElement.textContent=value
    4.         isLastKeyOperation=false
    5.     }else{
    6.         resultElement.textContent+=value
    7.     }
    8. }

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

    1. let lastNumber=0;
    2. let lastOperation='';
    3. let isLastKeyOperation=false;
    4. function handleOperation(value){
    5.     lastNumber=Number.parseFloat(resultElement.textContent)
    6.     lastOperation=value
    7.     isLastKeyOperation=true;
    8. }
    9. //对应的数字也要改变
    10. ====》
    11. function handleNumber(value){
    12.     if(resultElement.textContent==='0'||isLastKeyOperation){
    13.         resultElement.textContent=value
    14.         isLastKeyOperation=false
    15.     }else{
    16.         resultElement.textContent+=value
    17.     }
    18. }

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

    1. function calculate(value){
    2.     let result=''
    3.     switch(lastOperation){
    4.         case 'plus':result=lastNumber+operationNumber;break;
    5.         case 'minus':result=lastNumber-operationNumber;break;
    6.         case 'multiple': result=lastNumber*operationNumber;break;
    7.         case 'division': result=lastNumber/operationNumber;break;
    8.         default:throw new Error("操作不存在");
    9.     }
    10.     resultElement.textContent= result
    11.     lastNumber= result
    12. }

  • 相关阅读:
    Dijkstral算法优化及经典递归题目
    应急响应之Windows主机入侵排查
    述职报告写作总结
    算符优先语法分析
    针对公网IP签发的IP地址SSL证书
    如何修复损坏的excel文件?
    Linux - 进一步理解 文件系统 - inode - 机械硬盘
    【JGit】 AddCommand 新增的文件不能添加到暂存区
    MyBatisPlus（九）模糊查询
    笔试刷题Day—8
  • 原文地址：https://blog.csdn.net/m0_46106931/article/details/127494999