dom 创建时间

下面讲述如何在页面生成一个装有日期的盒子

首先写出一个日期的函数进行赋值使用document.createElement创建一个文档节点div，然后将时间函数输出在div之中，利用document.body.appendChild(div);将div写入body里面，那么又将如何生成蕴含时间函数的div呢我们通过document.addEventListener来触发document里面的div，既然有了div（盒子）就要设置一个定位我们利用div.setAttribute("style","font-size:20px ; color: cyan;salmon;font-family: '微软雅黑'; border-radius: 20px; padding:30px; text-align:center; background: brown;position:absolute; left:"+e.clientX+"px; top:"+e.clientY+"px;");中的position:absolute; left:"+e.clientX+"px; top:"+e.clientY+"px;函数将盒子的位置设置为鼠标点击的位置，下面将代码分享给大家！

<p style="text-align: center;font-size:30px ;font-family: '微软雅黑'; color: brown;">点击屏幕获取当前日期</p>
<script>
        
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth()+1;
        var dates = date.getDate();
        var arr = ["星期日","星期1","星期2","星期3","星期4","星期5","星期6"];
        var day = date.getDay();
        var a4 = (year+"年-"+month+"月-"+dates+"日-"+arr[day]);        
        var div = document.createElement("div");
        
        document.addEventListener("click",function(e){
            div.setAttribute("style","font-size:20px ; color: cyan;salmon;font-family: '微软雅黑'; border-radius: 20px; padding:30px; text-align:center; background: brown;position:absolute; left:"+e.clientX+"px; top:"+e.clientY+"px;");
            div.innerHTML = a4;
            document.body.appendChild(div);
        });
</script>

页面中效果