一.event对象 var oEvent = ev || event;//获取事件对象 oEvent.clientX oEvent.clientY//获取鼠标坐标 oEvent.cancelBubble = true;//阻止冒泡 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1…
一.键盘事件 onkeydown触发, keyCode键盘编码 ctrlKey altKey shiftKey 键盘控制div移动 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; posit…
一.阻止默认行为 return false; 自定义右键菜单 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0;} #ul1{ list-style:none; display:none; width:100px; padding:5px; ba…
一.javascript的组成 ECMAScript DOM BOM 二.变量类型 常见类型有:number, string, boolean, undefined, object, function typeof 运算符,用来检测对象的类型,如:alert(typeof 'aaa'); //string 三.数据类型转换 显示类型转换(强制类型转换):parseInt(), parseFloat(); 隐示类型转换:==.===.-.*./ isNaN(),检测一个对象是一个非数字 四.作用域…
1.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} </…
一.弹性运动 运动原理:加速运动+减速运动+摩擦运动: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;} </…
一.图片放大缩小 <!doctype html> <html> <head> <meta charset="utf-8"> <title>图片放大缩小</title> <style> *{ margin:0; padding:0; list-style:none;} #ulList{ margin:50px;} #ulList li{ margin:10px; width:100px; height:1…
运动框架 可以实现多物体任意值运动 例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>运动框架</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px; opacity:0.3;…
一.多物体运动 需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用: 例子1: <!doctype html> <html> <head> <meta charset="utf-8"> <title>多物体运动</title> <style> div{ width:100px; height:100px; background:red; float:left; m…
一.缓冲运动 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意:当计算出来的速度有小数时需要取整: (500 - oDiv.offsetLeft) / 7 = iSpeed;  iSpeed = iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); 例子1: <!doctype html> <html>…
一.js的运动 匀速运动 清除定时器 开启定时器 运动是否完成:a.运动完成,清除定时器:b.运动未完成继续 匀速运动停止条件:距离足够近  Math.abs(当然距离-目标距离) < 最小运动距离 div的匀速运动(简单运动) <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #di…
一.BOM打开,关闭窗口 window.open(); window.close(); <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload = function() { var oBtn = document.getElementById('btn1'); var…
一.DOM的创建,插入,删除 createElement(标签名) appendChild(节点) insertBefore(节点,原有节点) removeChild(节点) <!doctype html> <html> <head> <meta charset="utf-8"> <title>创建,删除,插入元素</title> <script> window.onload = function(){…
一.Dom基础 childNodes(有兼容问题),children nodeType getAttribute() firstChild,lastChild,previousSilbing,nextSilbing(有兼容问题) offsetParent,parentNode <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title&…
一.函数 什么是函数 function show(){}//不带参数 function show(){return 123;}//不带参数,有返回值 function show(arg1, arg2,...){}//可带一个或多个参数 function show(a, b){//带参数,并有返回值 return a+b; } 函数实例:获取元素样式 <!doctype html> <html> <head> <meta charset="utf-8&qu…
WindowsAPI每日一练系列 :https://www.cnblogs.com/LexMoon/category/1246238.html WindowsAPI每日一练(1) WinMain 要跟计算机进行交互,就需要计算机显示信息给人看到,或者发出声音给人听到,然后人看到或听到相应的信息后,再输入其它信息给计算机,这样就可以让计算机进行数据处理,把结果显示给我们.现在就来编写一个最简单的Windows应用程序,让它提示一行文字给我们看到,这就是简单的目标. #include <window…
HTML事件处理程序 <input type="button" value="Click Me" onclick"showMessage()"/> 通过HTML指定事件处理程序的的缺点是HTML与JavaScript代码紧密耦合.如果要更换事件处理程序,就要改动两个地方:HTML代码和JavaScript代码. DOM0级事件处理程序 var btn=document.getElementById("myBtn")…
<JavaScript权威指南 第六版 中文版> 第二章 词法结构 2.1字符集 JavaScript是使用Unicode字符集编码写的. 2.1.1区分大小写 JavaScript是区分大小写的语言.也就是说,关键字.变量.函数名和所有的标识符都需要采用一致的大小写形式. 许多客户端JavaScript对象和属性与它们所表示的HTML标签和属性同名.在HTML中这些标签和属性名可以使用大写,而在JavaScript中则必须使用小写 2.1.2空格.换行符和格式控制符 JavaScript会忽…
探究JavaScript中的五种事件处理程序 我们知道JavaScript与HTML之间的交互是通过事件实现的.事件最早是在IE3和Netscape Navigator 2中出现的,当时是作为分担服务器运算负载的一种手段. 通俗地理解,事件就是用户或浏览器自身执行的某种操作.而事件处理程序即为响应某个事件的函数.抽出主干,即事件处理程序为函数.  我们又把事件处理程序称为事件侦听器.  事件处理程序是以"on"开头的,因此对于事件on的时间处理程序即为onclick.时间处理程序在Ja…
在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.call调用这个全局函数即可.2.在非特定的环境下(例如编写通用的flash插件),是不能限制用户的函数名的,所以根本无法约定全局函数:是否可以通过类似js的回调函数的形式实现事件监听呢? 其实js与flash的通信,一般情况下可以进行一些比较简单的通信,如传递基本的数据类型.传递简单的对象.调用函数等,…
在学习javascript中,如果在事件的使用上出现一些反差效果,不良效果,如鼠标的移入移出时,显示你所需要的内容, 但就是没有出现,然而你不断的检查代码,逐个代码查错,还在浏览器的调试工具中调试都没有发现错误,没有看到你所 想要的错误,那么这个时候你要判断一下是不是冒泡事件带来的不良效果了,不过在判断之前,你是不是要知道什么是冒泡事件呢? 接下来冒泡的解释: 冒泡就是从里的事件源一级一级向上触发直到window: 图: 事件源就是你所触发事件在位置的元素,而在这个元素触发了事件,如图你所触发的…
一.函数 1. 什么是函数 函数的作用,可以写一次代码,然后反复地重用这个代码. 如:我们要完成多组数和的功能. var sum; sum = 3+2; alert(sum); sum=7+8 ; alert(sum); .... //不停重复两行代码 如果要实现8组数的和,就需要16行代码,实现的越多,代码行也就越多.所以我们可以把完成特定功能的代码块放到一个函数里,直接调用这个函数,就省去重复输入大量代码的麻烦. 使用函数完成: function add2(a,b){ sum = a + b…
出处:http://www.w3cfuns.com/thread-5592229-1-17.html 1.大标题一   1.子标题   2.子标题   3.子标题2.大标题二   1.子标题   2.子标题3.大标题三   1.子标题   2.子标题   3.子标题 这种问题,你可能会觉得直接定义两个计数器,分别编号不就行了,于是就写出了如下代码: <!DOCTYPE HTML> <html> <head> <meta charset="gb2312&q…
<!DOCTYPE HTML> <html> <head> <meta charset="gb2312"> <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title> <style type="text/css"> *{margin:0; padding:0;} #list{font-family:"Micro…
progress标签:从名字上来看,估计大家也能猜到这个标签是什么标签了,没错,他是一个进度条.在HTML5中我们终于可以不用模拟了. <progress id="W3Cfuns_progress" max="100"></progress> 复制代码 progress属性:value:表示当前进度max:表示总进度注:value和max属性的值必须大于0,value的值小于或等于max属性的值. 案例: <!DOCTYPE HTML&…
igure元素是一种元素的组合,可带有标题(可选).figure标签用来表示网页上一块独立的内容,将其从网页上移除后不会对网页上的其他内容产生影响.figure所表示的内容可以是图片.统计图或代码示例. figure用友一个子标签——figcaption标签. 注意:一个figure元素内最多只允许放置一个figcaption元素,其他元素可无限放置. 案例1:不带有标题的figure元素: <!DOCTYPE HTML> <html> <head> <meta…
details标签的出现,为我们带来了更好的用户体验,不必为这种收缩展开的效果再编写JS来实现.注:目前仅Chrome支持此标签. details有一个新增加的子标签——summary,当鼠标点击summary标签中的内容文字时,details标签中的其他所有元素将会展开或收缩. detalis标签: 案例1: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" conte…
上得厅堂.下得厨房,写得代码.翻得围墙,欢迎来到睿不可挡的每日一小练! 题目:Eratosthenes筛选法 内容: 求质数是一个非常普遍的问题,通常不外乎用数去除.除到不尽时,给定的数就是质数.可是早在2000年前人们就知道了一个不必用除法而找出2~N的全部质数的方法. 如果一个非常奇妙的筛子,能够给出一个数.比如i,这个筛子有办法把i全部的倍数去掉.请用这种方法求出2~N之间的全部质数.即Eratosthenes筛选法. 我的解法:上来没多想,打开vs2013就敲了起来,问题果然非常easy…
JavaScript中的鼠标滚轮事件详解/*Firefox注册事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if(document.addEventListener){  document.addEventListener('DOMMouseScroll',scrollFunc,false);} Safari与Chrome属于同一类型,可使用HTML DOM方式添加事件 ~~~otherBrowser: wi…
上得厅堂,下得厨房,写得代码,翻得围墙,欢迎来到睿不可挡的每日一小练! 题目:高速Fibonacci数算法 内容:先说说Fibonacci数列,它的定义是数列:f1,f2....fn有例如以下规律: 尝试寻找高速的求出fn的方法 我的解法:上来没多想,打开vs2013就敲了起来,问题果然非常easy,分分钟就超神..奥,不正确就攻克了! 事实上题目中就给出了这个算法的递归形式,所以首先我想到的是递归解法,只是由于求解高速方法在递归之前,我编写了一个非递归的算法 #include <iostrea…