js小练习——在页面中点击哪里，哪里出现div（圆）

最新推荐文章于 2020-04-09 14:19:54 发布

???Sir

最新推荐文章于 2020-04-09 14:19:54 发布

阅读量172

点赞数

原文链接：http://www.cnblogs.com/chuangzi/p/6754135.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点哪,哪出15*15的圆型div</title>
    <style type="text/css">
        html,body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        .yuan {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
<script>
    /**
     * 点哪 哪出15*15的圆型div
     */
    document.body.addEventListener('click', function (e) {
        var div = document.createElement('div'); //创建div元素
        var className = document.createAttribute('class');//创建class属性
        className.value = 'yuan';//属性赋值
        div.style.left = e.clientX - 16/2 + 'px';
        div.style.top = e.clientY - 16/2 + 'px';
        div.setAttributeNode(className);//设置属性节点
        div.style.backgroundColor = '#' + parseInt(0xffffff * Math.random()).toString(16);//随机背景颜色
        document.body.appendChild(div);//给body添加元素div
    })

</script>
</body>
</html>

转载于:https://www.cnblogs.com/chuangzi/p/6754135.html

???Sir

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js小练习——在页面中点击哪里，哪里出现div（圆）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点哪,哪出15*15的圆型div</title> <style type="text/css"> html,body{ hei...
复制链接

扫一扫