业务需求描述：
1.页面显示的文字和图片全部居中显示；
2.玩家可以选择两个角色中的一个，当选择一个角色的时候在页面中显示角色的图片，且当鼠标滑过角色图片的时候显示图片相关信息；
3.在角色图片下面显示角色说明；
业务代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择自己的游戏角色</title>
<script>
let choosePersona = function(){
let inputObj1 = document.getElementById("input1");
let inputObj2 = document.getElementById("input2");
let imageObj = document.getElementsByTagName("img")[0];
//在img节点后面创建span节点，并将其添加到body后面
let spanObj = document.createElement("span");
//设置span样式
spanObj.style.fontSize = "100%";
spanObj.style.borderStyle = "solid";
spanObj.style.borderWidth = "2px";
spanObj.style.width = "20px";
spanObj.style.height = "15px";
document.body.appendChild(spanObj);
if (inputObj1.checked){
imageObj.setAttribute("src","persona/两翼天使.png");
imageObj.setAttribute("title","鼠标滑过显示‘这是两翼天使角色’")
imageObj.setAttribute("alt","应当显示两翼天使图片");
//防止重复创建span元素
if(document.getElementById("span1")){
document.body.removeChild(document.getElementById("span1"));
}
spanObj.setAttribute("id","span1");
//为span节点创建文本节点
let text1 = document.createTextNode("玩家选择了两翼天使！");
//将文本节点添加到span节点
spanObj.appendChild(text1);
//设置span节点中文本样式
spanObj.style.borderColor = "#102B6A";
spanObj.style.backgroundColor = "#FFE600";
}else if(inputObj2.checked){
if(document.getElementById("span1")){
document.body.removeChild(document.getElementById("span1"));
}
spanObj.setAttribute("id","span1");
imageObj.setAttribute("src","persona/魔法师.png");
imageObj.setAttribute("title","鼠标滑过显示‘这是魔法师角色’");
imageObj.setAttribute("alt","应当显示魔法师图片");
//为span节点创建文本节点
let text1 = document.createTextNode("玩家选择了魔法师！");
//将文本节点添加到span节点
spanObj.appendChild(text1);
//设置span节点中文本样式
spanObj.style.borderColor = "#102B6A";
spanObj.style.backgroundColor = "#DEA32C";
}
}
function addLoadEvent(func){
let oldonload=window.onload;
if(typeof oldonload !="function"){
window.onload=func;
}else {
window.onload=function(){
oldonload();
func();}
}
}
addLoadEvent(choosePersona);
</script>
</head>
<body style="text-align:center;margin: 0 auto;">
<!--<label>标签在单选按钮和复选按钮上经常被使用，使用该标签后，你点击单选按钮或复选按钮的文本也是可以选中的-->
<div id="div1">
<b>请选择游戏角色：</b>
<label><input id="input1" type="radio" name="choose" value="angel" onclick="choosePersona()"/>点击选择两翼天使</label>
<label><input id="input2" type="radio" name="choose" value="magician" onclick="choosePersona()"/>点击选择魔法师</label>
</div>
<img src="" title="" alt=""><br/>
</body>
</html>
代码运行效果：
注意知识点：
1.文本节点
let text1 = document.createTextNode("玩家选择了魔法师！");
此代码为创建文本节点代码。
JS三大节点：元素节点、属性节点、文本节点。
2.元素居中
<body style="text-align:center;margin: 0 auto;">
</body>
在html5中<center></center>标签已经弃用，被上面的代码替代。