我们都知道webstorm里用到的<select>标签制作的下拉菜单都比较丑,而且在不同的浏览器中呈现的样式也不一样,因此下面我们可以自己制作一个下拉菜单运用到我们的网页当中,具体代码实现如下:
HTML部分:
css部分:
js部分:
以上三个部分加起来就实现了模拟select下拉菜单,其中js部分代码中this.innerHTML是获取当前点击的标签里的内容。我这里模拟的下来菜单也很简单,如果你还想让它更好看,可以添加其他样式。
下面我就将这个下拉菜单运用到简易计算器里面,实现它的代码如下图:
HTML部分:
css部分:
js部分:
写完了之后效果如下图:
1.点击请选择出现计算器里基本的运算符
2.输入想要的运算计算得到结果:
本次的分享就是这样,学习前端真的需要打好各种基础知识才能一步一步走下去,还需要不断进步,希望我能给大家分享更多更好的内容,感谢围观!