制作404页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录和注册页面设计</title>
<style>
/*通配选择器*/
*{
margin: 0;
padding: 0;
}
.box{
font-family: "Microsoft YaHei UI";
font-size: 80px;
color: #f1ebe5;
/*字体阴影*/
text-shadow: 0 8px 9px #c4b59d,0px -2px 1px rgba(255,46,108,0.73);
/*设置字体加粗*/
font-weight: bold;
text-align: center;
padding: 20px 100px;
/*设置颜色渐变*/
background: linear-gradient(to bottom,#0dc418 0%,#5dc4a3 100%);
}
h1{
border-bottom: 1px solid #fff;
}
h2{
font-size:20px ;
}
input{
background-color: #20a7ff;
border-radius: 10px;
border:0;
height: 30px;
width: 80px;
padding: 5px;
color: white;
}
</style>
</head>
<body>
<div class="box">
<h1>404</h1>
<h2>抱歉...你找的页面不存在了</h2>
<input type="button" value="返回首页"/>
<input type="button" value="联系管理"/>
</div>
</body>
</html>
注释：linear-gradient(direction, color-stop1, color-stop2, ...)：颜色渐变函数
计算借贷支出金额
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自动计算借贷支出金额</title>
<style>
</style>
</head>
<body bgcolor="white">
<!--表单取名-->
<form name="loandata">
<table>
<!--第一行的的文本占三列-->
<tr><td colspan="3"><b>输入贷款信息:</b></td> </tr>
<tr>
<td>(1)</td>
<td>贷款总额:</td>
<!--onchange事件会在域的内容改变时发生，也可用于单选框或复选框改变后触发的事件-->
<td><input type="text" name="principal" size="12" onchange="calculate()"/></td>
</tr>
<tr>
<td>(2)</td>
<td>年利率(%):</td>
<td><input type="text" name="interest" size="12" onchange="calculate()"/></td>
</tr>
<tr>
<td>(3)</td>
<td>借款期限(年):</td>
<td><input type="text" name="years" size="12" onchange="calculate()"/></td>
</tr>
<tr><td colspan="3"><input type="button" value="计算" onclick="calculate()"/></td></tr>
<tr><td colspan="3"><b>输出还款信息:</b></td> </tr>
<tr>
<td>(4)</td>
<td>每月还款金额:</td>
<td><input type="text" name="payment" size="12"/></td>
</tr>
<tr>
<td>(5)</td>
<td>还款总金额:</td>
<td><input type="text" name="total" size="12"/></td>
</tr>
<tr>
<td>(6)</td>
<td>还款总利息:</td>
<td><input type="text" name="totalinterest" size="12"/></td>
</tr>
</table>
</form>
</body>
<script>
function calculate() {
//贷款总额
//把年利率从百分比换成十进制，转换成月利率
//还款月数
//获取文本框的值
var principal=document.loandata.principal.value;
var interest=document.loandata.interest.value/100/12;
var payments=document.loandata.years.value*12;
//计算月支付额
var x=Math.pow(1+interest,payments);
var monthly=(principal*x*interest)/(x-1);
//检查结果是否是无穷大的数
if(!isNaN(monthly)&&(monthly!=Number.POSITIVE_INFINITY)&&(monthly!=Number.NEGATIVE_INFINITY)){
document.loandata.payment.value=round(monthly);
document.loandata.total.value=round(monthly*payments);
document.loandata.totalinterest.value=round(monthly*payments)-principal;
}
else {
document.loandata.payment.value="";
document.loandata.total.value="";
document.loandata.totalinterest.value="";
}
}
function round(x) {
return Math.round(x*100)/100;
}
</script>
</html>
注释：
- 通过文本框的名字获取其值或向文本框传递值
- 获取
input文本框的值的方法：.value、document.getElementById("idName").value、$("#idName").val()、$("input[id='idName']").val()、$("#idName").attr("value")、$("input[id='idName']").attr("value") Math.pow(X,Y)函数：返回X的Y次幂的值，若结果为虚数或负数则返回NaN，若结果过大则返回Number.POSITIVE_INFINITY或Number.NEGATIVE_INFINITYisNaN()：检查参数是否为非数字值，返回值为布尔类型Math.round()：把参数四舍五入为最接近的整数
来源：CSDN
作者：Lavrov
链接：https://blog.csdn.net/weixin_43410827/article/details/104138075