demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
</head>
<style>
.box{
width: 500px;
height: 500px;
background-color: #0f0;
position: relative;
}
.small{
width: 100px;
height: 100px;
background-color: #f00;
position:absolute;
left: 0;
top: 0;
}
.small:hover{
cursor: move;
}
</style>
<body>
<div class="box">
<div class="small"></div>
</div>
</body>
<script>
var box = document.querySelector('.box')
var small = document.querySelector('.small')
small.onmousedown = function(){
document.onmousemove = function(e){
var e = e || window.event;
var x = e.pageX;
var y = e.pageY;
// 小div的left = 鼠标在浏览器中的位置 - 小div的一半 - 大div左边的距离
var left = x - small.offsetWidth/2 - box.offsetLeft;
var top = y - small.offsetHeight/2 - box.offsetTop;
if(left<0){
left = 0
}
if(top<0){
top = 0
}
if(left>box.clientWidth - small.offsetWidth){
left=box.clientWidth - small.offsetWidth
}
if(top>box.clientHeight - small.offsetHeight){
top=box.clientHeight - small.offsetHeight
}
small.style.left = left + "px"
small.style.top = top + "px"
}
}
document.onmouseup = function(){
document.onmousemove = null
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
</head>
<body>
<input type="text" name="option">
</body>
<script>
var option = document.querySelector('[name="option"]')
option.addEventListener('focus',focus)
var arr = ['Vue','React','Angular'];
function focus (){
var ul = document.createElement('ul')
arr.forEach(function(item){
var li = document.createElement('li');
li.innerText = item;
li.style.cursor = 'pointer'
ul.appendChild(li)
})
document.body.appendChild(ul)
ul.style.listStyle = 'none'
ul.style.padding = 0
ul.style.margin = 0
ul.style.backgroundColor = 'lightblue'
ul.style.color = 'yellow';
ul.style.width = option.offsetWidth + 'px'
ul.addEventListener('click',click)
}
function click (e){
var e = e || window.event;
var target = e.target||e.srcElement;
var content = target.innerText;
option.value = content;
document.body.removeChild(this)
}
option.onblur = function(){
setTimeout(function(){
var ul = document.querySelector('ul')
document.body.removeChild(ul)
},200)
}
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
</head>
<body>
<form action="">
<table>
<tr>
<td>姓名</td>
<td><input type="text" name="name"></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="number" name="age"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="text" name="sex"></td>
</tr>
<tr>
<td></td>
<td><input type="submit"></td>
</tr>
</table>
</form>
<table class="table" border="1" width="500">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
<script>
var form = document.querySelector('form')
form.addEventListener('submit',submit)
function submit (e){
var htmlDate = '';
var e = e || window.event;
if(e.preventdefault){
e.preventdefault()
}else{
e.returnValue = false;
}
var name = document.querySelector('[name="name"]').value
var age = document.querySelector('[name="age"]').value
var sex = document.querySelector('[name="sex"]').value
var tbody = document.querySelector('.table tbody')
htmlDate += '<tr>'
htmlDate += '<td>'+name+'</td>'
htmlDate += '<td>'+age+'</td>'
htmlDate += '<td>'+sex+'</td>'
htmlDate +='</tr>'
tbody.innerHTML = tbody.innerHTML + htmlDate;
document.querySelector('[name="name"]').value = ''
document.querySelector('[name="age"]').value = ''
document.querySelector('[name="sex"]').value = ''
}
</script>
</html>
