javascript平时小例子①（移动的小div）

css样式：

#box{
width: 300px;
height: 300px;
background: deepskyblue;
position: absolute;
margin-right: 20px;
}

html布局：

js部分：

window.onload=function(){
abc();
setInterval(abc,50)
function abc(){
var oDiv=document.getElementById("box");
oDiv.style.left=oDiv.offsetLeft+10+"px";
}

}

时间： 2024-10-13 20:24:12

javascript平时小例子①（移动的小div）的相关文章

javascript平时小例子⑦(鼠标跟随的div)

<!doctype html><html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1 { width: 200px; height: 200px; background-color: #0F0; position: absolute } </style> <script> window.onl

学习任何一门框架,都不可能一股脑儿的从入口代码从上到下,把代码看完, 这样其实是很枯燥的,我想也很少有人这么干,或者这么干着干着可能干不下去了. 因为肯定很无聊. 我们先从一个最最简单的小例子,来查看new Vue(options)实例,这个过程发生了什么. vm实例上的属性又如何添加上去的,又如何渲染到浏览器页面上的. 关于vue的数据依赖和虚拟dom都是重点,必然会在以后的帖子记录. 这篇帖子就根据下例子,看看实例化一个vm实例做了啥吧. 先把小例子贴出来: <div id="app&

javascript 复合数据的定义和使用 ( 小例子 )

思路:主要是先要获取到三个 box 元素的 top 值和 left 值,然后有复合数据进行存值,再进行数组值的位置移动来实现切换 box 位置效果: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <style> #warp{margin:50p

javascript 利用 - 枚举思想 - 添加地名的一个小例子

利用枚举思想来添加地名,主要功能是:判断点击a标签(即当前的地名)如果在ul的li不存在的话那么就添加,有则不添加,而且还提供了相应的排序功能... HTML代码: <div id="china"> <a href="javascript:;">广州</a> <a href="javascript:;">深圳</a> <a href="javascript:;"

JavaScript之属性操作及小例子

一.属性操作示例代码代码详解: 首先要知道,html找标签是通过选择器,JavaScript寻找标签是通过,例: document.getElementById('box');可这么理解:在文档下寻找通过id标签获取元素所以,下面两行代码可理解为:声明变量=后面接收通过box标签获得span区域元素,通过ul标签获得ul区域元素 var box=document.getElementById('box'); var ul=document.getElementById('ul');接下来就可

五个小例子教你搞懂 JavaScript 作用域问题

众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者将使用五个小例子来给大家分析下 JavaScript 的作用域要注意的问题. 感谢例子的来源 (这5个例子我做错了2个 [嘿嘿,尽情鄙视吧],笔者就是要死磕自己,奉献大家!) 先给出五个例子: 每个例子旁边都会给出答案的链接,如果你全部都正确了,你可以忽略这篇短文,并深深的鄙视下笔者. 例一:

javascript 小例子(待补充)

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function figure1(){ var figure = money.value; var wushi = Math.floor(figure/50); var ershi = Math

javascript 面向对象写法的简单小例子,方面以后参考

面向对象写法的简单小例子,也即是一个小模板,方便以后拿来参考,如果有误,请各位大神多多指点.思想:主要给#box添加颜色和添加内容,一个方法是添加颜色,另一个方法是添加内容,然后编写的面向对象写法. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <st

JavaScript基础中的基础（小例子：滚动字幕）

一.变量局部变量声明前面要加"var" <script type="text/javascript"> // 全局变量 name = 'alex'; function func(){ // 局部变量 var age = 18; // 修改全局变量name name = "eric" } </script> 二.数据类型数据类型有:数字.字符串.布尔值数组.字典数字.字符串.布尔值.null.undefin

angular ngRoute小例子

ngRoute学习小例子单页面应用中可以使用ng-view,当修改ng-view的template时可以实现一个页面html中展示不同内容(div部分). 例如index.html中包含ng-view 1 <!DOCTYPE HTML> 2 <html ng-app="app"> 3 <head> 4 <script src="./bower_components/angular/angular.js"></s