HTML5_验证码-点名器-倒计时-function-放大镜

来源：互联网发布：focusky mac 破解版编辑：程序博客网时间：2024/05/21 19:46

4-15上午
验证码

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            #span1{                display: inline-block;                width: 100px;                text-align: center;            }        </style>    </head>    <body>        <input type="text" id="inp1" />        <span id="span1"></span>        <button id="btn1">更新验证码</button>        <button id="btn2">提交</button>    </body>    <script type="text/javascript">        var arr =['1','2','3','4','5','6','7','8','9','0',                  'q','w','e','r','t','y','u','i','o','p','a','s','d','f','g','h','j','k','l','z','x','c','v','b','n','m',                            'Q','W','E','R','T','Y','U','I','O','P','A','S','D','F','G','H','J','K','L','Z','X','C','V','B','N','M'        ]               var oInp = document.getElementById("inp1");        var oSpan = document.getElementById("span1");        var oBtn1 = document.getElementById("btn1");        var oBtn2 = document.getElementById("btn2");        oBtn1.onclick = function(){            var i = parseInt(Math.random()*arr.length);            var j = parseInt(Math.random()*arr.length);            var g = parseInt(Math.random()*arr.length);            var k = parseInt(Math.random()*arr.length);            oSpan.innerHTML = arr[i]+arr[j]+arr[g]+arr[k];        }        oBtn1.onclick();        oBtn2.onclick = function(){            oInp.value = oInp.value.toUpperCase();            var oSpanH = oSpan.innerHTML.toUpperCase();            if(oInp.value==oSpanH){                alert('成功');            }else{                alert('失败');            }            oBtn1.onclick();            oInp.value = '';        }    </script></html>

2、创建元素 document.createElement(‘’)
放入元素放入的某个元素.appendChild()
删除子元素父元素.removeChild()
这里写图片描述

这里写图片描述
此处不能实现点击a标签就删除对应的内容是因为获取不到a标签，因为a标签是生成的，还没运行这块时，a已经生成。运行到这块时，程序已经运行完成，页面上就没有a标签了。

3、升级版点名器
用到了timer=setInterval(function(),50)定时器
在达到指定条件时，清除定时器clear.Interval(timer)
这里写图片描述
4、使元素左右上下都居中，对子元素用绝对定位，左右上下均为0，然后margin：0 auto;对父元素使用相对，如果父元素是body,则不需要设置。
5、升级版倒计时用到了图片。关于时间小时，分钟，秒的计算。

这里写图片描述
6、声明函数
（1）

这两个等价
这三个等价
但三个有区别！！！
第一个是直接量，不能提前预读，第二个是声明方式,可以提前预读。第三个是创建对象方式，速度最慢。
（2）三种定义的对比

（3）匿名函数（用完之后就释放，节省空间。）
这里写图片描述

回调匿名函数
结果是15
自调匿名函数
前面的括号是把函数function包含在里面，后面的（）是运行的意思。如果加参数，就在末尾（）中添加。结果输出15.而且有弹窗“哈哈哈”
下午
7、闭包（很少使用）子函数调用父函数的值并返回，父函数返回子函数，变量不会被释放。避免全局污染。
这里写图片描述

结果为1，1

这里写图片描述结果为g函数

这里写图片描述结果为101

这里写图片描述结果为104，200，闭包不会释放，而且不会影响全局的值

列表内容
这里写图片描述

对于变量，一般函数先去调用局部变量，若没有局部变量则调用全局变量。
8、递归
这里写图片描述结果如下图

解析如下

9、onmouseup 鼠标松开index.5html
onmousedown鼠标点下
onmouseover鼠标进入
onmouseout鼠标离开
onmousemove鼠标移动
兼容
offsetWidth,offsetHeight,offsetLeft,offsetTop是没有单位的，可以直接计算。
document.documentElement.offestWidth—–获得屏幕宽度
document.documentElement.offestHeight—–获得屏幕高度
有时候获得的高度不是真正的屏幕高度
所以需要设置
这里写图片描述
10、放大镜效果 index.6html
IE浏览器不识别rgba
用filter:alpha(opacity=50)
注意比列要相适应，box与图片的比例是1：4，遮罩层小块与左边box比例1：4，右边放大部分（与box大小相同）与图片的比例1：4要相同。
(1)
For循环带颜色的那个就是先把每个图片的边框先初始化。然后把选中的改成红色。
这里写图片描述 iE8及以下透明度的兼容代码
（2）

event用来获得坐标值，event火狐不兼容,火狐支持这种写法

所以用evt||event来兼容

e.clientX指鼠标位置的x坐标，offsetWidth指当前的宽度
(3)
这个*4是比例问题，负号是对于右边bBox的背景图片的定位
这里写图片描述
(4)
放大镜部分的一些小处理

(5)放大镜上面有div但是无滚动框的调整。

减去oBox.offsetTop,即oBox距离屏幕顶端的距离
(6)放大镜有滚动框时的调整。
这是写给谷歌的兼容。

减去oBox.offsetTop,即oBox距离屏幕顶端的距离，再加上滚动条的距离，因为减oBox.offsetTop时把滚动条的距离减去了，所以需要补上。

这里写图片描述

关于善知教育（官网：善知教育（点击进入）微信公众号：善知技术）
地址：北京东燕郊经济技术开发区文化大厦
咨询老师郑老师电话/微信：13315631002 QQ:1939441377
目前我们开设Java服务器Html5前端网页Android移动端PHP服务器，有全日制班有周末班;
学费优惠至8480!!!!
我们的优势：

基础课程一个月免费学,全程面授;
平均就业薪资10000-15000;
免费重听，跨学科免费学习;
5-5.5个月大容量技术授课;
0学费0基础入学，海量项目实训, 弹性教学制度;
大部分学生找到月薪10k以上薪资工作, 项目实训自然终止;
课程全程视频录制,偶尔耽搁也不担心;
学习途中随时可以无理由退费根据学生情况;
灵活安排授课时间，一个科目学不会可以免费学习另一个科目;
全日制班，周末班，网上授课同时进行;
技术交流QQ群：198983438（加群请备注在哪里看到我们的群）在群里面随时会更新一些我们的课程视频以及开班动态

善知教育学习视频大汇总

善知教育石老师Java视频的网盘地址http://pan.baidu.com/s/1eQ0JHi6
善知教育吕老师Java视频http://pan.baidu.com/s/1i44RTjR
善知教育武老师Html5视频http://pan.baidu.com/s/1hsGGKnE
善知教育石老师Android知识点http://pan.baidu.com/s/1hsBpOQo

阅读全文

0 0