个人展示界面
1.index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
#src{
border: 1px solid white ;
width: 200px;
height: 200px;
margin: auto;
text-align: center;
}
#tittle {
font-size: 40px;
color: red;
font-weight: 700;
}
.tv {
font-size: 20px;
color: red;
font-weight: 700;
}
.ta {
font-size: 20px;
color: red;
width: 100%;
height: 100%;
border: none;
resize: none;
cursor: pointer;
background:transparent;
border-style:none;
overflow-x:hidden;
font-weight: 700;
}
input[type='text'] {
background-color: transparent;
border: 0;
font-size: 20px;
color: red;
width: 200px;
font-weight: 700;
}
input[type='password'] {
background-color: transparent;
border: 0;
}
body {
margin: 0px;
padding: 0px;
}
#bg {
100%;
height: 100%;
top: 0px;
left: 0px;
position: absolute;
}
</style>
</head>
<body background="../img/11.jpg" onload="init()" >
<table border="0" cellpadding="20" align="center" width="900">
<tr>
<td >
<div id="src">
<!--<input type="button" value="下一张" onclick="changeImg()"/>-->
<img src="../img/1.jpg" / width="100%" height="100%" id="img1">
</div>
</td>
<td colspan="2" align="right" id="tittle">个人简介</td>
</tr>
<tr>
<td width="300">
<div class="tv">姓名 <input type="text" name="name" id="name" value="王锋" /></div>
</td>
<td width="300">
<div class="tv">性别 <input type="text" name="sex" id="sex" value="男" /></div>
</td>
<td width="300">
<div class="tv">民族 <input type="text" name="race" id="race" value="汉" /></div>
</td>
</tr>
<tr>
<td>
<div class="tv">出生日期 <input type="text" name="birthday" id="birthday" value="2001.11.27" /></div>
</td>
<td>
<div class="tv">电话 <input type="text" name="phone" id="phone" value="15930901693" /></div>
</td>
<td>
<div class="tv">邮箱 <input type="text" name="email" id="email" value="2308553780@qq.com" /></div>
</td>
</tr>
<tr>
<td>
<div class="tv">年级 <input type="text" name="grade" id="grade" value="2019级" /></div>
</td>
<td>
<div class="tv">班级 <input type="text" name="cla" id="cla" value="信1905-1" /></div>
</td>
<td>
<div class="tv">学号 <input type="text" name="sid" id="sid" value="20193247" /></div>
</td>
</tr>
<tr>
<td>
<div class="tv">专业 <input type="text" name="major" id="major" value="软甲工程" /></div>
</td>
<td>
<div class="tv">院校 <input type="text" name="school" id="school" value="石家庄铁道大学" /></div>
</td>
<td></td>
</tr>
<tr>
<td>
<div class="tv">人生格言<textarea class="ta">精诚所至金石为开</textarea></div>
</td>
<td>
<div class="tv">人生经历
<textarea class="ta" cols="40" rows="10">
2001年一道闪电降临人间 2005-2007称霸幼儿园 2007-2013年叱咤小学 2013-2016年风靡初中 2016-2019征战高中 2019-2021进入大学 2021-...普渡众生
</textarea>
</div>
</td>
<td>
<a href="update.html" onclick="into()">修改个人信息</a>
</td>
</tr>
</table>
</body>
<script>
function init(){
setInterval("changeImg()",2000);
}
var i=0;
function changeImg(){
i++;
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
if(window.localStorage.getItem("mname") != null) {
document.getElementById("name").value = window.localStorage.getItem("mname");
document.getElementById("sex").value = window.localStorage.getItem("msex");
document.getElementById("race").value = window.localStorage.getItem("mrace");
document.getElementById("birthday").value = window.localStorage.getItem("mbirthday");
document.getElementById("phone").value = window.localStorage.getItem("mphone");
document.getElementById("email").value = window.localStorage.getItem("memail");
document.getElementById("grade").value = window.localStorage.getItem("mgrade");
document.getElementById("cla").value = window.localStorage.getItem("mcla");
document.getElementById("sid").value = window.localStorage.getItem("msid");
document.getElementById("major").value = window.localStorage.getItem("mmajor");
document.getElementById("school").value = window.localStorage.getItem("mschool");
}
function into() {
var sname = document.getElementById("name").value;
window.localStorage.setItem("sname", sname);
var ssex = document.getElementById("sex").value;
window.localStorage.setItem("ssex", ssex);
var srace = document.getElementById("race").value;
window.localStorage.setItem("srace", srace);
var sbirthday = document.getElementById("birthday").value;
window.localStorage.setItem("sbirthday", sbirthday);
var sphone = document.getElementById("phone").value;
window.localStorage.setItem("sphone", sphone);
var semail = document.getElementById("email").value;
window.localStorage.setItem("semail", semail);
var sgrade = document.getElementById("grade").value;
window.localStorage.setItem("sgrade", sgrade);
var scla = document.getElementById("cla").value;
window.localStorage.setItem("scla", scla);
var ssid = document.getElementById("sid").value;
window.localStorage.setItem("ssid", ssid);
var smajor = document.getElementById("major").value;
window.localStorage.setItem("smajor", smajor);
var sschool = document.getElementById("school").value;
window.localStorage.setItem("sschool", sschool);
window.location.href = 'update.html';
}
</script>
</html
2.update.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
姓名 <input type="text" name="name" id="name"/></br>
性别 <input type="text" name="sex" id="sex"/></br>
民族<input type="text" name="race" id="race"/></br>
出生日期 <input type="text" name="birthday" id="birthday"/></br>
电话 <input type="text" name="phone" id="phone"/></br>
邮箱 <input type="text" name="email" id="email"/></br>
年级 <input type="text" name="grade" id="grade"/></br>
班级 <input type="text" name="cla" id="cla"/></br>
学号 <input type="text" name="sid" id="sid"/></br>
专业 <input type="text" name="major" id="major"/></br>
院校 <input type="text" name="school" id="school"/></br>
<input type="button" value="修改完成" onclick="tiaozhuan()"/>
</body>
<script>
document.getElementById("name").value=window.localStorage.getItem("sname");
document.getElementById("sex").value=window.localStorage.getItem("ssex");
document.getElementById("race").value=window.localStorage.getItem("srace");
document.getElementById("birthday").value=window.localStorage.getItem("sbirthday");
document.getElementById("phone").value=window.localStorage.getItem("sphone");
document.getElementById("email").value=window.localStorage.getItem("semail");
document.getElementById("grade").value=window.localStorage.getItem("sgrade");
document.getElementById("cla").value=window.localStorage.getItem("scla");
document.getElementById("sid").value=window.localStorage.getItem("ssid");
document.getElementById("major").value=window.localStorage.getItem("smajor");
document.getElementById("school").value=window.localStorage.getItem("sschool");
function tiaozhuan(){
var sname = document.getElementById("name").value;
window.localStorage.setItem("mname",sname);
var sex = document.getElementById("sex").value;
window.localStorage.setItem("msex",sex);
var race = document.getElementById("race").value;
window.localStorage.setItem("mrace",race);
var birthday = document.getElementById("birthday").value;
window.localStorage.setItem("mbirthday",birthday);
var phone = document.getElementById("phone").value;
window.localStorage.setItem("mphone",phone);
var email = document.getElementById("email").value;
window.localStorage.setItem("memail",email);
var grade = document.getElementById("grade").value;
window.localStorage.setItem("mgrade",grade);
var cla = document.getElementById("cla").value;
window.localStorage.setItem("mcla",cla);
var sid = document.getElementById("sid").value;
window.localStorage.setItem("msid",sid);
var major = document.getElementById("major").value;
window.localStorage.setItem("mmajor",major);
var school = document.getElementById("school").value;
window.localStorage.setItem("mschool",school);
window.location.href='index.html';
}
</script>
</html>