1. 汇率转换表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
td{
width: 200px;
height: 35px;
text-align: center;
}
[colspan]{
background: #ff0c36;
}
select, button{
height: 35px;
}
input{
height: 30px;
}
div{
margin: 0 0 5px 0;
}
</style>
</head>
<body>
<div>
<select id="select1" onchange="getRate()">
<option value="0">美元</option>
<option value="1">欧元</option>
<option value="2">日元</option>
<option value="3">港元</option>
<option value="4">韩元</option>
<option value="5">比特币</option>
</select>
<button onclick="changeselect()">互换</button>
<select id="select2" onchange="getRate()">
<option value="0">美元</option>
<option value="1">欧元</option>
<option value="2">日元</option>
<option value="3">港元</option>
<option value="4">韩元</option>
<option value="5">比特币</option>
</select>
<span>数额:</span>
<input id="inputnum">
<button onclick="getRate()">汇率转换</button>
</div>
<table border="1">
<tr>
<td colspan="3">按当前汇率换算</td>
</tr>
<tr>
<td id="td11">美元</td>
<td>汇率</td>
<td id="td13">人民币</td>
</tr>
<tr>
<td id="td21">100</td>
<td id="td22">6</td>
<td id="td23">600</td>
</tr>
</table>
<script>
function changeselect() {
var select1Value = document.getElementById("select1").value
var select2Value = document.getElementById("select2").value
console.log(select1Value)
console.log(select2Value)
var mid = select1Value
document.getElementById("select1").value = select2Value;
document.getElementById("select2").value = mid
}
// 能从html获取的只有一个东西 表单元素的value
// html标签只负责显示/.架构, 存储数据永远都是js事情
var listRate = [1, 0.9, 100, 8, 1000, 0.000016]
var listMoney = ['美元', '欧元', '日元', '港元', '韩元', '比特币']
function getRate() {
var inputnum = document.getElementById("inputnum").value
if (inputnum == ''){
return
}
//
var select1Value = document.getElementById("select1").value
var select2Value = document.getElementById("select2").value
var rate = listRate[select2Value]/listRate[select1Value]
document.getElementById('td11').innerText = listMoney[select1Value]
document.getElementById('td13').innerText = listMoney[select2Value]
document.getElementById('td21').innerText = inputnum
document.getElementById('td22').innerText = rate
document.getElementById('td23').innerText = rate * inputnum
}
</script>
</body>
</html>
2. 注册页面（）
下面是实现后
| 下面是实现后 |
1, 实现注册页面:
a,点击看不清换一张, 会切换图片
b,点击立即注册找好友, 会判断输入的验证码和当前图片代表的验证码是否一致
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<div align="center">
<h1>0315作业</h1>
</div>
<div>
<table align="center">
<tr>
<td>注册邮箱：</td>
<td><input type="email"></td>
</tr>
<tr>
<td></td>
<td>你还可以手机注册</td>
</tr>
<tr>
<td>创建密码：</td>
<td><input type="password"></td>
</tr>
<tr>
<td><label>真实姓名：</label></td>
<td><input type="name"></td>
</tr>
<tr>
<td align="right"> 性别：</td>
<td>
<input type="radio" name="male">男
<input type="radio" name="female">女
</td>
</tr>
<tr>
<td align="right"> 生日：</td>
<td>
<input id="birthday" type="date" value="2020-12-23"/>
<input type="date">
<select name="">
<option> 1998</option>
<option> 1999</option>
<option> 2000</option>
<option> 2001</option>
</select>
<select name="">
<option> 1</option>
<option> 7</option>
<option> 9</option>
<option> 12</option>
</select>
</td>
</tr>
<tr>
<td align="right"> 我正在：</td>
<td>
<select name="">
<option> 睡觉</option>
<option> 吃饭</option>
<option> 跑步</option>
<option> 代码</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<img id="img1" src="./verycode.gif"/><span onclick="changeimg1()">看不清,换一张</span>
</td>
</tr>
<tr>
<td><label>验证码: </label></td>
<td><input id="inputstr"></td>
</tr>
<tr>
<td></td>
<td><img src="btn_reg.gif" onclick="click999()"></td>
</tr>
</table>
</div>
<script>
var list = ['./image1/1111.png','./image1/1234.png','./image1/2222.png','./image1/3333.png','./image1/4567.png']
var listCode = ['1111','1234','2222','3333','4567'];
// var inputNode = document.getElementById("inputstr")
// console.log(inputNode.value)
var tag = -1
function changeimg1(){
var imgNode = document.getElementById('img1')
var index = Math.floor(Math.random()*list.length)
while (tag == index){
index = Math.floor(Math.random()*list.length)
}
tag = index
imgNode.src = list[index]
}
function click999(){
var inputstr = document.getElementById('inputstr').value
if (inputstr == listCode[tag]){
alert("真")
}else {
alert("假")
}
}
</script>
</body>
</html>
3. 点名
2, 实现一个随机点名提问页面(如果拥有班级信息,比如['zs', 'ls', 'wu'],
随机点一个同学回答问题,在页面上显示这个同学的姓名
css文件
.core {
/*absolute 生成绝对定位的元素*/
/*元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。*/
position: absolute;
left:600px;
top:150px;
}
.showName {
width: 200px;
height: 250px;
font-size: 50px;
background-color: red;
text-align: center;
line-height: 200px;
color: #f4f4f4;
}
button {
position: absolute;
width: 200px;
height: 25px;
/*font-weight 属性设置文本的粗细*/
font-weight: bold;
font-size: large;
bottom: -40px;
}
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业2</title>
<link rel="stylesheet" href="index1.css">
</head>
<body>
<div class="core">
<div class="showName" id="showName"></div>
<button id="clickButton" onclick="show()">点名回答问题</button>
</div>
<script>
function show(){
//获取按钮元素
var clickButton = document.getElementById("clickButton");
//获取展示区元素
var showName = document.getElementById("showName")
//名字数组
var name = ["zs", "ls", "wu", "zl"];
var index = Math.floor(Math.random()*name.length);
showName.innerHTML = name[index];
}
</script>
</body>
</html>
改进
分为3块
html 框架
css 皮肤和血肉
js 思维逻辑
| 设置的背景色是：purple |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
