<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//入口文件
window.onload =function(){
var a = document.getElementById("a")
var b = document.getElementById("b")
var c = document.getElementById("c")
var tj = document.getElementById("tj")
var you = document.getElementById("you")
var d = document.getElementById("d")
var e = document.getElementById("e")
var f = document.getElementById("f")
// 绑定事件: 输入文字
tj.onclick = function(){
alert("成功...")
you.innerHTML = '<div class="two" id = "you">' +
' 姓名: ' + a.value + ' <br/>' +
' 性别: ' + b.value + ' <br/>' +
' 职业: ' + c.value + ' <br/>' +
'</div>'
}
d.onclick = function(){
you.className = "two"
}
e.onclick = function(){
you.className = "two01"
}
f.onclick = function(){
you.className = "two02"
}
}
</script>
<style>
.zong{width: 410px; height: 310px;margin: auto;}
.one{width: 200px; height: 300px; float: left; border: black solid 2px;}
.two{width: 200px; height: 300px; float: right;
background: silver; border: 2px solid black;
line-height:50px; text-align: center; font-size: 20px; }
.two01{width: 200px; height: 300px; float: right; background: aqua; border: 2px solid black;
line-height:50px; text-align: center; font-size: 20px; }
.two02{width: 200px; height: 300px; float: right; background: darkorange ; border: 2px solid black;
line-height:50px; text-align: center; font-size: 20px; }
.tj{margin-left: 60px; margin-top: 20px; width: 80px; height: 35px;}
</style>
</head>
<body>
<div class="zong">
<div class="one" id = "zuo">
<label>姓名</label>
<input type="text" id = "a">
<br/><br/>
<label>性别</label>
<input type="text" id = "b">
<br/><br/>
<label>职业</label>
<input type="text" id = "c">
<br/><br/>
<input type="radio" id = "d" name="1" value="1"> 灰色
<input type="radio" id = "e" name="1" value="2"> 蓝色
<input type="radio" id = "f" name="1" value="2"> 橙色
<br/><br/>
<input type="button" class="tj" id="tj" value="提交"> <br/>
</div>
<div class="two" id = "you">
姓名: haohao <br/>
性别: 男 <br/>
职业: 学生 <br/>
</div>
</div>
</body>
</html>
js_前端_名片添加 数据和更改图片
最新推荐文章于 2023-03-28 18:40:30 发布