js_前端_名片新增 資料和更改圖片
阿新 • • 發佈：2018-12-12
<!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>