<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #warp{ width:480px; height: 500px; background-color: rgb(91,91,92); border-radius: 15px; } #warp .zy{ height: 54px; font-size: 20px; background-color: rgb(91,91,92); color: white; margin:0; padding-left:15px; line-height: 54px; border-radius: 15px; } #warp .pm{ height:82px; background-color: rgb(95,94,97); color: white; margin:0; padding-left:15px; line-height:82px; } #warp .cl{ flex-wrap: wrap; display: flex; margin: 0; padding: 0; } li{ width: 25%; height: 118px; list-style: none; background-color: rgb(119,121,120); border: 1px solid rgb(83,85,83); box-sizing: border-box; line-height: 118px; text-align: center; color: white; } #warp .zero{ width:50% } button{ width: 100%; height: 60px; border: 0; color: white; background-color: rgb(91,91,92); border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } #warp .cl .hu{ background-color:rgb(86,89,88); } #warp .cl .yellow{ background-color: rgb(255,159,9); } </style> </head> <body> <div id="warp"> <ul class="zy">自研计算器</ul> <ul class="pm"></ul> <ul class="cl"> <li class="hu ac">AC</li> <li class="hu">(</li> <li class="hu">)</li> <li class="yellow">+</li> <li>1</li> <li>2</li> <li>3</li> <li class="yellow">-</li> <li>4</li> <li>5</li> <li>6</li> <li class="yellow">*</li> <li>7</li> <li>8</li> <li>9</li> <li class="yellow">/</li> <li class="zero">0</li> <li>.</li> <li class="yellow">%</li> </ul> <button>计算</button> </div> <script> /** * 1.首先先找到li标签 * 1.1。绑定点击事件 * 1。2. 找到pm屏幕 * 1.3。屏幕里的数字依次相加 * 2.1eval */ // 首先找到1-10所有事件 // * 1.首先先找到li标签 // 找到里面所有的值并定义变量 const he=document.querySelectorAll('li') //循环找到所有li的值并打印 for(let i=0;i<he.length;i++){ //绑定所有的点击事件了,怎么把他放进屏幕呢 he[i].addEventListener('click',function() { // 找到屏幕上找到he[i]所有he[i]的内容 // 文本定义一个变量+点击li里面的值就能出来这个难点 let div=document.querySelector('.pm').innerText let js=div+he[i].innerText document.querySelector('.pm').innerText=js console.log(js) }) } //1为pm里的值清空 // 怎么清空呢要找到屏幕所有的值并为AC绑定一个点击事件点击AC之后屏幕的值为0这是中点 let a=document.querySelector('.ac') a.addEventListener('click',function () { document.querySelector('.pm').innerText='' }) //把eval丢到屏幕的内容里面去。这样的话,在屏幕里所显示的数字和符号就能被eval所转换成相对应的作用和功能 let b=document.querySelector('button') b.addEventListener('click',function () { //定义一个变量用eval给屏幕里面的属性进行计算然后求和 var re = eval(document.querySelector('.pm').innerText); document.querySelector('.pm').innerText = re; }) </script> </body> </html>
计算器JavaScript,,css,html。我在犹豫还要不要发这些东西,emmm,都没人看,自己看看罢了,我在想是我写的不好还是太基础了,还是太冷门了呢,如果有缘人看到给我个回复谢谢
最新推荐文章于 2024-09-02 20:34:02 发布
关键词由CSDN通过智能技术生成