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()+;

        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>

页面中效果

巴特西

dom 创建时间

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

最新文章

热门文章