我们都知道webstorm里用到的<select>标签制作的下拉菜单都比较丑，而且在不同的浏览器中呈现的样式也不一样，因此下面我们可以自己制作一个下拉菜单运用到我们的网页当中，具体代码实现如下：
HTML部分：
css部分：
js部分：
以上三个部分加起来就实现了模拟select下拉菜单，其中js部分代码中this.innerHTML是获取当前点击的标签里的内容。我这里模拟的下来菜单也很简单，如果你还想让它更好看，可以添加其他样式。
下面我就将这个下拉菜单运用到简易计算器里面，实现它的代码如下图：
HTML部分：
css部分：
js部分：
写完了之后效果如下图：
1.点击请选择出现计算器里基本的运算符
2.输入想要的运算计算得到结果：
本次的分享就是这样，学习前端真的需要打好各种基础知识才能一步一步走下去，还需要不断进步，希望我能给大家分享更多更好的内容，感谢围观！
我们都知道webstorm里用到的 标签制作的下拉菜单都比较丑，而且在不同的浏览器中呈现的样式也不一样，因此下...
自带的select下拉菜单美观度实在不怎么样，并且不容易美化，当然我们可以模拟实现select下拉菜单，但是代码稍...
自己使用div模拟select，有如下需求： 组件获得焦点时，自动弹出下拉菜单 鼠标点击下拉菜单时，下拉菜单不能收...
1. select select单独使用 查询数据库的参数 调用内置函数 简易计算器 2. 配合其他字句使用 （1...
传统的下拉菜单 Select 元素，由一个 Select + 一系列的 option 元素构成。 对于下拉菜单，我...
一个简易计算器：
下拉菜单元素定位，使用Select类定位。 特别地，对下拉菜单元素定位，需要导入Select类，然后定位到sele...
用javascrript实现一个简易计算器，界面可以根据个人喜好设计，我做了一个超简洁的计算器，效果图如下： 简易...
手头上有个项目，需要用到select。用了以后咋感觉这么........索性，自己用ul、li,模拟了一个sele...
最近项目用到了下拉菜单，又不想引入其他UI框架来实现，在网上查了好久能不能用css+js来兼容select在各个浏...
本文标题：模拟select下拉菜单运用到简易计算器里面
本文链接：https://www.haomeiwen.com/subject/fbvfnftx.html
网友评论