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

首先写出一个日期的函数进行赋值使用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 创建时间的更多相关文章

  1. a属性+DOM创建回流+动画运动+

    超链接a的属性 href分析: < a  href = " " >  点击刷新页面,相当于向后台发送了一次请求 < a  href = " # &quo ...

  2. 通过自定义特性,使用EF6拦截器完成创建人、创建时间、更新人、更新时间的统一赋值(使用数据库服务器时间赋值,接上一篇)

    目录: 前言 设计(完成扩展) 实现效果 扩展设计方案 扩展后代码结构 集思广益(问题) 前言: 在上一篇文章我写了如何重建IDbCommandTreeInterceptor来实现创建人.创建时间.更 ...

  3. 微信公众帐号开发-消息创建时间long型与标准时间的互相转换

    /**  *   */ package com.hd.admin.wxmeet.utils; /**  * @author jymcpp  *  */ import java.text.DateFor ...

  4. Linux如何找出用户的创建时间

    在Linux系统中,如何找到用户创建的时间呢? 其实是没有标准方法查找用户创建时间.下面再搜索了一些资料后,自己验证并测试了一下这些方法,仅供参考: 1:如果创建的用户有家目录,那么可以ls -l / ...

  5. 微信学习总结 09 解析接口中的消息创建时间CreateTime

    1 消息的创建时间 网页超链接的作用以及如何在文本消息中使用网页超链接 2. 具体实现 刘峰博主的博文已经分析的很清楚了,直接去看就行了 .http://blog.csdn.net/lyq8479/a ...

  6. 《BI项目笔记》创建时间维度(1)

    SSAS Date 维度基本上在所有的 Cube 设计过程中都存在,很难见到没有时间维度的 OLAP 数据库.但是根据不同的项目需求, Date 维度的设计可能不大相同,所以在设计时间维度的时候需要搞 ...

  7. reinstall_xbt: Linux中如何查看文件的最初创建时间

    Linux中如何查看文件的最初创建时间 与文件相关的几个时间: 1.访问时间,读一次这个文件的内容,这个时间就会更新.比如对这个文件使用more命令.ls.stat命令都不会修改文件的访问时间.   ...

  8. Linux中如何查看文件的最初创建时间

    查看 一个文件的 最初创建时间: Linux中如何查看文件的最初创建时间  linux     目前Linux没有直接查看创建文件的命令,你只能通过文件是否被修改过来进行判断. //查看代码stat  ...

  9. Web 在线文件管理器学习笔记与总结(2)显示文件列表(名称,类型,大小,可读,可写,可执行,创建时间,修改时间,访问时间)

    主要函数: filetype() 判断文件类型 filesize() 得到文件大小(字节) is_readable() 判断文件是否可读 is_writeable() 判断文件是否可写 is_exec ...

随机推荐

  1. element-ui入门

    element-ui入门 element-ui是一个ui库,它不依赖于vue.但是却是当前和vue配合做项目开发的一个比较好的ui框架. Layout布局(el-row.el-col) element ...

  2. 玩转 SpringBoot 2 快速整合拦截器

    概述 首先声明一下,这里所说的拦截器是 SpringMVC 的拦截器 HandlerInterceptor.使用SpringMVC 拦截器需要做如下操作: 创建拦截器类需要实现 HandlerInte ...

  3. Python 模拟淘宝登录的两种方法

    方法一.urllib的post登录 import urllib import urllib2 import cookielib def taobao(username,password): cj = ...

  4. Java 学习笔记之 Synchronized锁重入

    Synchronized锁重入: 当一个线程得到一个对象锁后,再次请求此对象锁时是可以再次得到该对象的锁.这也证明在一个Synchronized方法/块的内部调用本类的其他Synchronized方法 ...

  5. 常见Failed to load ApplicationContext异常解决方案!!

    java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.conte ...

  6. samba文件共享服务部署

    1.安装samaba服务程序 yum install -y samba 2.查看smaba文件,由于注释空行较多,选择过滤 egrep -v "#|;|^$" /etc/samba ...

  7. cobalt strike和metasploit结合使用(互相传递shell会话

    攻击机 192.168.5.173 装有msf和cs 受害机 192.168.5.179 win7 0x01 msf 派生 shell 给 Cobalt strike Msfvenom生成木马上线: ...

  8. Python之装饰器(二)

    以前你有没有这样一段经历:很久之前你写过一个函数,现在你突然有了个想法就是你想看看,以前那个函数在你数据集上的运行时间是多少,这时候你可以修改之前代码为它加上计时的功能,但是这样的话是不是还要大体读读 ...

  9. caffe中softmax源码阅读

    (1) softmax函数                                      (1) 其中,zj 是softmax层的bottom输入, f(zj)是softmax层的top输 ...

  10. python中使用logging将日志写入文件或输出到控制台

    import logging import os class Logger: def __init__(self, name=__name__): # 创建一个loggger self.__name ...