实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HIV cutoff值计算器</title>
<style type="text/css">
.box {
width: 500px;
height: 400px;
background-color: #efefef;
border: 1px solid lightgray;
text-align: center;
margin: auto;
margin: 20px auto;
color: #636363;
border-radius: 15px;
box-shadow: 2px 2px 2px #999;
}
.box2 {
width: 500px;
height: 400px;
background-color: skyblue;
border: 1px solid lightgray;
text-align: center;
margin: auto;
margin: 20px auto;
color: coral;
border-radius: 15px;
box-shadow: 2px 2px 2px #999;
}
table {
margin: auto;
/* border: 1px solid red;*/
}
td {
width: 150px;
height: 30px;
padding: 5px 10px;
text-align: right;
color: coral;
}
input, select {
border: 0;
padding: 0;
width: 200px;
height:100%;
border:none;
text-align: center;
text-align-last:center;
/*background-color: cyan;*/
}
button {
width: 100%;
height: 100%;
border: none;
background-color: skyblue;
color: white;
}
.box2 button {
background-color: lightgreen;
}
button:hover {
cursor: pointer;
background-color: coral;
width: 105%;
height: 105%;
}
</style>
<!-- cdn在线引入 -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<!-- 本地引入
<script type="text/javascript" src="js/jquery-3.3.1.js"></script> -->
<script type="text/javascript">
// 原始写法
// $(document).ready(function(){
// function changeitem(){
// if (this.value == 'item2'){
// // alert($('.item')[0].value)
// $('#box').addClass('box2')
// $('#box').removeClass('box')
// } else {
// // alert($('.item')[0].value)
// $('#box').addClass('box')
// $('#box').removeClass('box2')
// }
// }
// $('.item')[0].onchange = changeitem
// })
// 简写
$(function(){
function changeitem(){
if (this.value == 'item2'){
// alert($('.item')[0].value)
$('#box').addClass('box2')
$('#box').removeClass('box')
} else {
// alert($('.item')[0].value)
$('#box').addClass('box')
$('#box').removeClass('box2')
}
}
$('.item')[0].onchange = changeitem
})
</script>
</head>
<body>
<!-- 1.获取页面元素的方法; 2.条件判断语句的使用方法 3.事件方法函数的作用 -->
<div class="box" id="box">
<h2>HIV cutoff值计算</h2>
<form>
<table>
<tr>
<td>界面风格：</td>
<td>
<select align:center class="item">
<option>请选择界面风格</option>
<option value="item1">风格1</option>
<option value="item2">风格2</option>
</select>
</td>
</tr>
<tr>
<td>请选择试剂厂商：</td>
<td>
<select name="factory" align:center>
<option value="null">请选择厂商</option>
<option value="bjwt">北京万泰</option>
<option value="zhlz">珠海丽珠</option>
<option value="shkh">上海科华</option>
</select>
</td>
</tr>
<tr>
<td class="num">数值1：</td>
<td><input type="text" name="num1"></td>
</tr>
<tr>
<td class="num">数值2：</td>
<td><input type="text" name="num2"></td>
</tr>
<tr>
<td class="num">数值3：</td>
<td><input type="text" name="num3"></td>
</tr>
<tr>
<td colspan="2"><button type="button">计算</button></td>
</tr>
<tr>
<td>cutoff值：</td>
<td style="text-align: center"><h3 id="placeholder"></h3></td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
//1.获取操作数,按钮与结果占位符
var num1 = document.getElementsByName('num1')[0],
num2 = document.getElementsByName('num2')[0],
num3 = document.getElementsByName('num3')[0],
fac = document.getElementsByName('factory')[0],
num = document.getElementsByClassName('num');
function disabled(){
if (this.value == 'shkh'){
num3.setAttribute('disabled','disabled')
num3.value = '无需输入'
num[0].innerHTML = '<span style="color:red">阳性对照1：</span>'
num[1].innerHTML = '<span style="color:red">阳性对照2：</span>'
num[2].innerHTML = '无需输入：'
} else {
num3.removeAttribute('disabled')
num[0].innerHTML = '<span style="color:blue">阴性对照1：</span>'
num[1].innerHTML = '<span style="color:blue">阴性对照2：</span>'
num[2].innerHTML = '<span style="color:blue">阴性对照3：</span>'
}
}
fac.onchange=disabled;
var btn = document.getElementsByTagName('button')[0]
var placeholder = document.getElementById('placeholder')
//2.给按钮添加事件,执行计算操作
btn.onclick = function(){
// var data1 = parseFloat(num1.value)
// var data2 = parseFloat(num2.value)
var factory = fac.value
var temp = 0
switch (factory){
case 'null':
alert("请选择试剂厂商")
fac.focus()
return false
}
if (num1.value.length == 0 ) {
alert('数值1不能为空')
num1.focus()
return false
} else if (isNaN(num1.value)) {
alert('数值1必须为数字')
num1.focus()
return false
} else if (num2.value.length == 0) {
alert('数值2不能为空')
num2.focus()
return false
} else if (isNaN(num2.value)) {
alert('数值2必须为数字')
num2.focus()
return false
} else if (num3.value.length == 0) {
switch (factory){
case 'bjwt':
alert('数值3不能为空')
return false
case 'zhlz':
alert('数值3不能为空')
return false
}
} else if (isNaN(num3.value)) {
alert('数值3必须为数字')
}
{
var data1 = parseFloat(num1.value)
var data2 = parseFloat(num2.value)
var data3 = parseFloat(num3.value)
}
switch (factory){
case 'null':
alert("请选择试剂厂商")
fac.focus()
return false
case 'bjwt':
temp = (data1 + data2 + data3)/3+0.12
break
case 'zhlz':
temp = (data1 + data2 + data3)/3+0.15
break
case 'shkh':
temp = (data1 + data2 )/2*0.1
}
var str = '<span style="color:coral">'
str += temp.toFixed(2)
str += '</span>'
placeholder.innerHTML = str
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
学习心得：
jQuery有两种引入方式：本地资源引入和cdn在线引入
如果开发环境未联网使用本地引入方式，在线开发可使用cdn在线引入方式
$(document).read()执行节点为页面DOM结构加载完成之后、资源文件加载之前执行，相比“windows.onload”方法js加载较早，并实现资源文件与JS效果异步加载，提升用户体验
