JavaScript+DOM编程艺术笔记（三）

最新推荐文章于 2024-08-04 16:33:59 发布

Autovy

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量128

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/JohnSmith232/article/details/106786544

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

js编程习惯

1.预留退路

确保网页在禁止js的情况下正常工作

2.分类JavaScript

js文件会在html文档之前加载到浏览器，但是一些js内容需要完整的文档模型才能执行。

这时我们可以用

window.onload = start;
function start(){}

这样就可以保证了start函数一定是在html文档全部加载到浏览器之后才执行的。

3.向后兼容性

检测浏览器对象和其是否支持某项功能。这就要用到对象嗅探技术

js实现动画效果

所谓动画是让元素的位置随时间不断发生变换。样式的改变用css更佳，但是对于动画实现，js则是唯一选择。

位置

1.用js函数设置元素位置

function positionMessage()
if (!document.getElementById)return false;
if(!document.getElementById("message")) return false;
var elem = document getElementById("message");
elem.style.position
absolute";
elem. style.left = "50px";
elem.style.top = "100px";

2.绑定页面加载成功为触发调节

页面加载触发的通用函数：

function addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload !='function){
window.onload = func;
   } else{
window. onload function(){
oldonload();
func ();
	}
   }
}
addLoadEvent(positionMessage);

时间

1.setTimeout()函数

js中setTimeout()函数可以让某个函数经过预定时间再执行。

variable = setTimeout("function",interval);

function：对应一个函数
interval：对应延迟的毫秒数
variable，为函数名，用clearTimeout(variable)可以在全局范围内取消排队等待执行的函数

2.时间递增量

让元素随时间不断变换位置

function moveMessage (){
if (!document. getElementById)return false
if (!document. getElementById("message"))return false
var elem = document.getElementById ( "message");
var xpos = parseInt(elem.styleleft);
var ypos = parseInt(elem.style.top);
if(xpos == 200 && ypos == 100){
return true;
if (xpos < 200){
	xpos++;
}
if (xpos > 200){
    xpos--;
}
if (ypos < 100){
    ypos--;
}
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    movement =  setTimeout("moveMessage()",10);
}