共1 条记录, 每页显示 10 条, 页签:
[1]
[浏览完整版]
标题：课上练习代码——利用JS完成点击绘制圆形
1楼
admin 发表于：2016/11/14 16:53:54
此主题相关图片如下：无标题.png
1）关于让网页响应单击事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script language="JavaScript">
function forward(){
alert("1")
}
document.onclick=forward;
</script>
</head>
<body>
</body>
</html>
2）增加单击打开网页
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script language="JavaScript">
function forward(){
window.location.href='http://www.baidu.com';
}
document.onclick=forward;
</script>
</head>
<body>
</body>
</html>
3）追加内容
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script language="JavaScript">
function forward(){
var body = document.body;
var div = document.createElement("div");
div.id = "mDiv";
div.innerHTML = "新元素";
body.appendChild(div);
}
document.onclick=forward;
</script>
</head>
<body>
</body>
</html>
4）点击画圆
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#circle {
width: 50px;
height: 50px;
top: 100px;
left: 100px;
border: 1px solid;
background-color: green;
border-radius: 50%;
position: absolute;
}
</style>
<script language="JavaScript">
function forward() {
var body = document.body;
var div = document.createElement("div");
div.id = "circle";
//div.className = "circle";
body.appendChild(div);
}
document.onclick = forward;
</script>
</head>
<body>
</body>
</html>
5）获取点击位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#circle {
width: 50px;
height: 50px;
top: 100px;
left: 100px;
border: 1px solid;
background-color: green;
border-radius: 50%;
position: absolute;
}
</style>
<script language="JavaScript">
function mousedown() {
ev = window.event;
var x = ev.pageX;
var y = ev.pageY;
var body = document.body;
var div = document.createElement("div");
div.innerHTML = x + "|" + y;
body.appendChild(div);
}
document.onmousedown = mousedown;
</script>
</head>
<body>
</body>
</html>
6）在点击处绘制圆形
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#circle {
width: 50px;
height: 50px;
border: 1px solid;
background-color: green;
border-radius: 50%;
position: absolute;
}
</style>
<script language="JavaScript">
function mousedown() {
ev = window.event;
var x = ev.pageX;
var y = ev.pageY;
var body = document.body;
var div = document.createElement("div");
div.id = "circle";
div.style.top = y + "px";
div.style.left = x + "px";
body.appendChild(div);
}
document.onmousedown = mousedown;
</script>
</head>
<body>
</body>
</html>
共1 条记录, 每页显示 10 条, 页签:
[1]