<!DOCTYPE html>
<html lang="en">
<style>
* {
padding: 0px;
margin: 0px;
}
.expression {
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-sizing: border-box;
}
.expression * {
box-sizing: border-box;
}
.expression .operator {
width: 25px;
height: 25px;
background: #cdcbfd;
border-radius: 5px;
justify-content: center;
display: flex;
align-items: center;
font-weight: bolder;
margin-left: 5px;
margin-right: 5px;
}
.expression .operatorName {
background: #50c38c;
border-radius: 5px;
text-align: center;
color: white;
line-height: 30px;
height: 30px;
font-weight: bolder;
margin-left: 5px;
margin-right: 5px;
font-size: 14px;
padding: 0 10px;
}
.expression .nominator,
.expression .denominator {
display: flex;
padding: 10px;
justify-content: center;
align-items: center;
}
.expression .nominator {
border-bottom: 2px solid #62abe4;
}
.expression .cursor {
cursor: pointer;
}
.expression .cursor:hover {
background: #f8b815c9
}
.expression .cust {
min-width: 100px;
text-align: center;
}
.expression select {
outline-color: transparent;
border: 0px
}
.expression select:visited {
outline: 0px;
border: 0px;
}
.expression select:active {
outline: 0px;
border: 0px;
}
</style>
<body>
<div class="expression">
<select onchange="selectChange(this)" class="operatorName cust">
<option value="">请选择</option>
<option value="1">计算公式1</option>
<option value="2">计算公式2</option>
<option value="3">计算公式3</option>
</select>
<div>
<div class="nominator">
<div class="operatorName cursor">计算公式</div>
<span class="operator">+</span>
<div class="operatorName cursor">计算公式</div>
<span class="operator">+</span>
<div class="operatorName cursor">计算公式</div>
</div>
<div class="denominator">
<div class="operatorName cursor">计算公式</div>
<span class="operator">+</span>
<div class="operatorName cursor">计算公式</div>
<span class="operator">+</span>
<div class="operatorName cursor">计算公式</div>
</div>
</div>
<div class="operator">=</div>
<div class="operatorName">100分</div>
</div>
<iframe id="iframe" width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" allowtransparency="yes"></iframe>
</body>
<script>
var iframe = document.querySelector("#iframe");
iframe.style.height = window.innerHeight + "px";
function selectChange(obj) {
var val = +obj.value;
switch (val) {
case 1:
iframe.setAttribute("src", "https://liuhao.blog.csdn.net/article/details/121118496");
break;
case 2:
iframe.setAttribute("src", "https://liuhao.blog.csdn.net/article/details/121136131");
break;
case 3:
iframe.setAttribute("src", "https://liuhao.blog.csdn.net/article/details/120728399");
break;
}
}
</script>
</html>
计算公式展示
原创
©著作权归作者所有:来自51CTO博客作者liuhao951866的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章