web定时器和DOM

倒计时实现步骤:

  1. 给按钮添加点击事件,在事件方法中 把用户输入的时分秒转成总秒数(总秒数=小时3600+分钟60+秒 注意文本框的.value是字符串需要转成数值)
  2. 开启定时器每隔1秒执行,在定时器里面让总秒数-- ,然后把总秒数再转换回时分秒 小时=总秒数/3600再整体取整 分钟=总秒数%3600/60 再整体取整 秒= 总秒数%60
  3. 把得到的时分秒拼接到一起显示到h2中

停止定时器

  • var timer = setInterval(方法,时间间隔);
  • clearInterval(timer);

只执行一次的定时器

  • setTimeout(方法,时间间隔);

DOM 文档对象模型

  • 和页面相关的内容

查找页面元素的方式

  1. 通过id查找元素
    var d = document.getElementById("id");
  2. 通过标签名查找元素
    var arr = document.getElementsByTagName("标签名");
  3. 通过name属性查找元素
    var arr = document.getElementsByName("name属性值");
  4. 通过class属性查找元素
    var arr = document.getElementsByClassName("class属性值");
  5. 获取页面的body
    document.body

创建元素对象

var i = document.createElement("img");
//设置图片路径
i.src="../imgs/2.gif";

添加元素

  • 格式: 父元素.appendChild(子元素);

插入元素

  • 格式: 父元素.insertBefore(新元素,弟弟元素);

删除元素

  • 格式: 父元素.removeChild(被删除的元素);

获取和修改元素文本内容

  • 格式: 元素对象.innerText="xxx";

获取和修改元素HTML内容

  • 格式: 元素对象.innerHTML="xxx";

修改元素的样式

  • 格式: 元素对象.style.样式名="值";

事件

  • 什么是事件: 事件就是一些系统提供的特定时间点 ,事件分为鼠标事件 键盘事件和状态改变事件

    1. 鼠标事件: onclick点击事件 onmouseover鼠标移入事件 onmouseout鼠标移出事件 onmousedown鼠标按下 onmouseup鼠标抬起 onmousemove鼠标移动
    2. 键盘事件: onkeydown键盘按下 onkeyup键盘抬起
    3. 状态改变事件: 页面加载完成事件onload 表达提交onsubmit 获取焦点onfocus 失去焦点onblur 值改变onchange 窗口尺寸改变onresize

事件对象event

  • 事件对象中保存着和事件相关的信息
  1. 鼠标事件中可以获得鼠标的坐标 event.clientX/clientY
  2. 键盘事件中可以获得键盘的编码 event.keyCode
    String.fromCharCode(65) 转成A
  3. 在任何事件里面都可以获得事件源,(事件源:指触发事件的标签)
    var obj = event.target || event.srcElement;

事件的动态绑定

  • 在标签的事件属性中添加事件称为非动态绑定, 通过js代码给元素添加事件称为动态绑定
    -格式: 元素对象.事件名 = function(){方法体}

事件的传递(事件冒泡)

  • 如果一个范围有多个元素的事件需要触发,则事件的传递顺序是从最底层元素望上级元素传递(类似于气泡从下往上)
  • 如果某一个范围内多个元素都需要添加事件只需要将事件添加在最上层元素
Last modification:July 8th, 2019 at 02:25 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment