js+html 5 자동 배열 대화 상자 인 스 턴 스 생 성
사용 하기에 매우 편리 합 니 다.관심 이 있다 면 코드 는 뒤에 있 습 니 다.
우선 Html 페이지 입 니 다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="width: 100vw;height: 100vh;padding: 0;margin: 0">
<input type="button" value=" div" onclick="creatDialog()" style="position: absolute;z-index: 200;"/>
<script src="index.js"></script>
</body>
</html>
function creatDialog() {
//
var wid=document.body.clientWidth;
var hei=document.body.clientHeight;
// dialog dialog
var obj=document.getElementsByClassName("dialog");
//5 10
var top=5;
var left=10;
if(obj.length!=0){
//
var h=parseInt(hei/(274+5));//
var w=parseInt(wid/(300+10));//
var n=parseInt(obj.length/h);// n+1
if(n+1<=w){
var m=obj.length%h// m+1
top=(274+5)*m+5;
left=(300+10)*n+10;
}else {
// ，
removeDialog();
top=5;
left=10;
}
}
// dialog
var dialog=document.createElement('div');
dialog.className="dialog";
dialog.id="dialog"+obj.length;
dialog.style.position="absolute";
dialog.style.marginLeft=left+"px";
dialog.style.marginTop=top+"px";
dialog.style.width="300px";
dialog.style.height="274px";
dialog.style.border="solid 1px";
dialog.style.backgroundColor="#FF0000";
document.body.appendChild(dialog);
}
function removeDialog() {
var obj=document.getElementsByClassName("dialog");
var num=obj.length;
for(var i=0;i<num;i++){
document.body.removeChild(document.getElementById("dialog"+i));
}
} 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
