※ 練習簡易動態效果 sticker
<HTML>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main.css">
<script src="new.js"></script>
<title>Stickers</title>
</head>
<body>
<div>
<button id="newButton" onclick="newPad();">Add Sticker</button>
</div>
<div id="padarea">
<section id="pad0" class="stickypad">
<!--
<textarea></textarea>
<button> Ok! </button>
-->
</section>
</div>
</body>
</html>
--------------------------------------------------------------------------------------------------------------------------
<CSS>
.stickypad{ /*黃色區塊的設定*/
position:absolute;
top:50px;
left:50px;
border: 1px dashed black;
width: 200px;
height: 120px;
background: yellow;
cursor:pointer; /* 暗示可以按下去 */
}
textarea{
resize:none;
}
--------------------------------------------------------------------------------------------------------------------------
<JavaScript>
window.onload=function(){
pad = document.getElementById('pad0');
pad.addEventListener('click', clickHandler, false);
}
function clickHandler(e){
var target = e.target || e.srcElement; /*同一個物件同時代表 e.target Or e.srcElement*/
var txt = document.createElement('textarea'); /*新增一個物件設定屬性*/
txt.rows =5;
txt.cols =20;
var btn = document.createElement('button'); /*新增一個物件*/
btn.innerHTML ='Ok!';
target.appendChild(txt);
target.appendChild(btn);
}
沒有留言:
張貼留言