javascript基础08

发现今天居然没有要写，那我就写写之前做的笔记吧。

这是事件的深入：

拖拽逻辑：

第一个： onmousedown : 选择元素

第二个： onmousemove : 移动元素

第三个：onmouseup : 释放元素

各浏览器在拖拽上都有问题；就是选中文字，就会产生问题

原因：当鼠标按下的时候选中文字就可以拖拽文字，这是浏览器的默认行为；

解决：阻止默认行为 -》在onmousedown时return false；

ie8以下无效；

ie8以下 ：

obj.setCapture(); 设置全局捕获，当我们给一个元素设置全局捕获以后，

那么这个意思就会监听后续触发生的所有事件，当有事件发生时候，就会被当前设置

了全局捕获的元素所触发

ie: 有，且效果

ff:有，但没有效果

非标准下ie ：

obj.setCapture(); 可以是只执行目标函数，实现到不自动选中文字

//只执行一次，要不在函数里被调用会出现不断执行的怪事。

执行当前对象的所有的事件函数的一次，无论事件在哪被执行。

对应的释放全局捕获

obj.releaseCapture();

可以使用其来在ie里阻止默认行为

碰撞检测

在web里是没有真正的碰撞的；只是边界的重合检测

九宫格的思路方式，检测边界重合

排除不能重合的情况 使用或 ||

每日一推：

作业题：

在做时想到看到一个事情，就是都是运动，那能不能把运动都封装起来了，所以就做了个运动的封装。

运动代码：

/*使用调用，obj对象，attr属性，speed速度，想达到的值，回调函数*/
/*因为运动基本都是px为单位的，至于透明度是没有单位，所以在这里把它分开了，
    其实也没有怎么改，就是判断是不是透明度这个属性，然后走透明度这条线
*/
        function doMove(obj,attr,speed,iTarget,fn){
            if(attr=="opacity"){
                obj.len=iTarget-parseFloat(getStyle(obj,"opacity"))*100;
            }else{
                obj.len=iTarget-parseFloat(getStyle(obj,attr));
            }
            /*这里判断方向，在初始点后的为负数，在初始点前为正数*/
            speed=obj.len>0?speed:-speed;

            clearInterval(obj.timer);
            obj.timer=setInterval(function(){
                if(!obj.num){
                    obj.num=0;
                }
                if(attr=="opacity"){
                    obj.num=parseFloat(getStyle(obj,attr))*100+speed;
                }else{
                    obj.num=parseInt(getStyle(obj,attr))+speed;
                }
                /*这里是判断到了目标点没有，到了就停止定时器*/
                if(obj.num>=iTarget && obj.len>0 || obj.num<=iTarget && obj.len<0){
                    obj.num=iTarget;
                    clearInterval(obj.timer);
                    fn && fn();
                }
                if(attr=="opacity"){
                    obj.style[attr]=obj.num/100;
                }else{
                    obj.style[attr]=obj.num+"px";
                }
            },30);

        }
        /*获取css属性值的，会获取表现出现的值*/
        function getStyle(obj,attr){
            return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
        }

后面题目的运动都是套用这个运动代码的。

第一题：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #imgBox{
            list-style: none;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        #imgBox li{
            position: relative;
            float: left;
             width: 400px;
            height: 285px;
            margin-left: 10px;
            margin-top: 10px;
            overflow: hidden;
            opacity: 1;
        }
        #imgBox li img {
            width: 400px;
            height: 285px;
        }
        #imgBox li p{
            position: absolute;
            top: 45%;
            left: -125px;
            font-size: 20px;
            width: 120px;
            text-align: center;
            line-height: 40px;
            border:2px solid #ff7600;
            background: rgba(0,0,0,0.6);
            color: #fff;
            font-weight: bold;
            border-radius: 15px;
            z-index: 5;
        }
        #imgBox li .mask,#imgBox li .Bubble{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #imgBox li .Bubble{
            z-index: 10;
        }
        #imgBox li .mask{
            background: #000;
            opacity: 0;
            filter: alpha(opacity:40);
        }
    </style>
    <script type="text/javascript" src="doMove.js"></script>
    <script type="text/javascript">

        window.onload=function(){
            var aLi=document.getElementsByTagName("li");
            for(var i=0;i<aLi.length;i++){
             start(i);
            }
        }

        /*写成页面小组件，然后循环套用即可，index就是下标，只要获取li的下标
        传参进出，就可以了
        */

        function start(index){
        var aLi=document.getElementsByTagName("li");
        var oMask=aLi[index].querySelector(".mask");
        var oP=aLi[index].querySelector(".text");
        var oBubble=aLi[index].querySelector(".Bubble");
        var w=aLi[index].offsetWidth;
        var w1=w-oP.offsetWidth;
            oBubble.onmouseover=function(){
                    oP.style.display="block";
                    oP.style.left=-oP.offsetWidth+‘px‘;
                    doMove(oMask,"opacity",4,40);
                    doMove(oP,"left",10,w1);
            }
            oBubble.onmouseout=function(){
                doMove(oMask,"opacity",4,0);
                if(parseInt(oP.style.left)<w1){
                    oP.style.left=-oP.offsetWidth+‘px‘;
                    oP.style.display="none";
                }else{
                    doMove(oP,"left",10,w);
                }
            }
        }    

    </script>
</head>
<body>
    <ul id="imgBox">
        <li><img src="./img/1.jpg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>
        <li><img src="./img/2.jpeg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>
        <li><img src="./img/3.jpg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>
        <li><img src="./img/4.jpg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>
        <li><img src="./img/5.jpg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>
        <li><img src="./img/6.jpeg" alt=""><p class="text">dessert</p><div class="mask"></div><div class="Bubble"></div></li>
    </ul>
</body>
</html>

第二题：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>海贼王</title>
    <!-- 这是基于html5做的，使用了HTML5里的disabled这个属性 -->
    <script type="text/javascript" src="doMove.js"></script>
    <script type="text/javascript">
        window.onload=function(){
            /*获取最外层的盒子，指的是包着这些内容，自己定义的盒子*/
            var oImgBox=document.querySelector(".imgBox");
            /*调用函数*/
            pull(oImgBox);

        }

        function pull(obj){
            /*默认速度,慢*/
            var speed=1;
            /*获取元素*/
            var oBtn=obj.querySelectorAll(".btnG input[type=‘button‘]"),
                oImg=obj.querySelector("img"),
                oMask=obj.querySelector(".mask"),
                aBtn=obj.querySelectorAll(".speed-btnG input[type=‘button‘]"),
                aCount=obj.querySelectorAll(".count span"),
                /*获取遮罩层初始高度*/
                dh=oMask.offsetHeight,
                /*获取图片高度*/
                h=oImg.offsetHeight;
                /*设置空变量预备装定时器(每个定时器都有一个id，而定时器返回的值就是这个id)*/
                obj.timer=null;
                /*获取图片高度，返回到页面的显示出来*/
                aCount[1].innerHTML=h;
                /*开档，快中慢*/
                for(var i=0;i<aBtn.length;i++){
                    aBtn[i].index=i;
                    aBtn[i].onclick=function(){
                        speed=1;
                        for(var j=0;j<this.index;j++){
                            speed+=5;
                        }
                    }
                }
                /*开定时器是为了监听高度的变化，然后把高度返回到页面*/
                clearInterval(obj.timer);
                obj.timer=setInterval(function(){
                    obj.h1=parseInt(getStyle(oMask,"height"));
                    if(obj.h){
                            if(obj.h==obj.h1){
                                aCount[0].innerHTML=obj.h;
                            }else{
                                obj.h=obj.h1;
                            }
                        }else{
                            obj.h=obj.h1;
                        }
                    },10);
                /*点击打开的点击事件*/
                oBtn[0].onclick=function(){
                    this.disabled=true;
                    oBtn[1].disabled="";
                    doMove(oMask,"height",speed,h);
                }
                /*点击关闭的点击事件*/
                oBtn[1].onclick=function(){
                    this.disabled=true;
                    oBtn[0].disabled="";
                    doMove(oMask,"height",speed,dh);
                }
        }
    </script>
    <style>
        #container{
            margin: 0 auto;
            border:1px solid #888;
            padding: 10px;
            width: 300px;
        }
        #container .imgBox{
            position: relative;
        }
        #container .count{
            position: absolute;
            top: 0;
            left: 125px;
            margin: 0;
            z-index: 10;
            color: #778899;
        }
        #container img{
            width: 300px;
            height: 500px;
            display: block;
        }
        #container .mask{
            position: absolute;
            bottom: 0;
            left: 0;
            background: #fff;
            width: 100%;
            height: 35px;
        }
        #container .btnG{
            position: absolute;
            top: 20px;
            left: 105px;
        }
        .speed-btnG{
            position: absolute;
            bottom: -45px;
            left: 35%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="imgBox">
            <p class="count"><span>100</span>/<span>500</span></p>
            <img src="./img/hzw.jpg" alt="">
            <div class="mask">
                <div class="btnG">
                    <input type="button" value="打开">
                    <input type="button" value="关闭" disabled>
                </div>
            </div>
            <div class="speed-btnG">
                <input type="button" value="慢">
                <input type="button" value="中">
                <input type="button" value="快">
            </div>
        </div>
    </div>
</body>
</html>

第三题：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>颜色表</title>
    <script type="text/javascript">
        window.onload=function(){
            /*create(第一个参数,第二个参数)
            *第一个参数:表格的宽度
            *第二个参数:颜色的数量(这个数量是(255/参数)向上取整后得到的数字num
            ，然后这个数字三次方得到的值就是颜色数量了)
            不过由于最后一行如果不能形成一行的宽度，就会删除掉这行，所以表现出来的
            颜色数量很可能会少一些
            */

            // 调用函数，传入参数,实现一步到位颜色表喔~~
            // 妈妈再也不担心重复操作出错了
            create(40,40);

        }
        /*创建表格，和别的元素*/
        function create(len,amount){
            var table=document.createElement("table");
            var p1=document.createElement("p");
            var p2=document.createElement("p");
            var num=0;
            var count=Math.floor(colorBox(amount).length/len);
            table.id="color-table";
            p1.className="color-code";
            p2.className="color-code";
            p1.innerHTML="颜色代码：RGB(0,0,0)";
            p2.innerHTML="颜色代码：#000000";
            for(var i=0;i<count;i++){
            var    tr=document.createElement("tr");
            for(var j=0;j<len;j++){
                var    td=document.createElement("td");
                    td.index=++num;
                    td.style.background="rgb("+colorBox(amount)[num]+")";
                    td.onclick=function(){
                        document.body.style.background="rgb("+colorBox(amount)[this.index]+")";
                        var arr=colorBox(amount)[this.index].split(",");
                        for(var i=0;i<arr.length;i++){
                            arr[i]=Number(arr[i]).toString(16);
                            if(arr[i].length<2){
                                arr[i]="0"+arr[i];
                            }
                        }

                        p1.innerHTML="颜色代码：RGB("+colorBox(amount)[this.index]+")";
                        p2.innerHTML="颜色代码：#"+arr.join("");
                    }
                    tr.appendChild(td);
                }
                table.appendChild(tr);
            }
        document.body.appendChild(table);
        document.body.appendChild(p1);
        document.body.appendChild(p2);
        }

        /*颜色代码数据的存储*/
        function colorBox(num){
            var box=[];
            for(var i=0;i<=255;i+=num){
                for(var j=0;j<=255;j+=num){
                    for(var z=0;z<=255;z+=num){
                        box.push(i+","+j+","+z);
                    }
                }
            }
            return box;
        }

    </script>
    <style>
    h1{
        width: 100px;
        margin: 0 auto;
    }
        #color-table{
            margin: 0 auto;
        }
        td{
            display: inline-block;
            margin: 2px;
            cursor: pointer;
            border:1px solid #000;
            width: 10px;
            height: 10px;
            padding: 5px;
        }
        .color-code{
            width: 330px;
            margin: 20px auto 0;
            font-weight: bold;
            background: #fff;
            height: 30px;
            color: #00BFFF;
            text-align: center;
            font-size: 20px;
            line-height: 30px;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <h1>颜色表</h1>
</body>
</html>
时间： 2024-10-01 20:22:32

javascript基础08的相关文章

JavaScript基础08——DOM

DOM的概念 DOM是document Object Model的缩写,简称文档对象模型.他给文档提供了一种结构化的表示方式,可以改变文档的内容和呈现方式 所谓的DOM是以家族的形式描述HTML.父子节点,兄弟节点 DOM中的选择器 1.getElementById(id) //获取指定元素的ID元素 2.getElementsByTagName() //获取相同元素的节点列表,通过标签名选择元素,返回值是一个数组 3.getElementsByName() //通过name值获取元素,返回值是

JavaScript基础系列目录（2014.06.01~2014.06.08）

下列文章,转载请亲注明链接出处,谢谢! 链接地址: http://www.cnblogs.com/ttcc/tag/JavaScript%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%20%E6%80%BB%E7%BB%93/ 1. Javascript基础---语法(待完成) 2. JavaScript基础---数据类型(待完成) 3. JavaScript基础---Array数组(待完成) 4. JavaScript基础---正则表达式(待完成) 5. Jav

javaScript基础之闭包

不管是Jquery还是EXTJS,现代的js框架中大量应用了js的一些特性,比如:匿名函数,闭包等等,导致源代码非常难以阅读. 不过要想真正的使用好前台的UI技术,还是需要去深入的理解这些概念.   在这里推荐几篇比较好的文章介绍javaScript基础: 当JavaScript从入门到提高前需要注意的细节:闭包部分:http://msdn.microsoft.com/zh-cn/library/hh968324.aspx 学习Javascript闭包(Closure):http://www.r

javascript入门书籍推荐《javascript基础教程》

前段时间看javascript高级教程的时候,发现很多基础的javascript概念,自己不懂. 网上搜了一下,看到大家对<javascript基础教程(第8版)>评价不错,买了一本. 作者: (美)Tom Negrino Dori Smith 译者: 陈剑瓯 柳靖 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 翻开看了后,受益匪浅,决定将这本书推荐给javascript的入门童鞋. 这本书的读者,要有一定的HTML基础,因为javascript基本都是对Dom的操作,所以,有一定的HT

js基础--javascript基础概念之语法

掌握一门语言 必须先掌握它的语法! javascript 的语法和C.Java.Perl 的语法有些相似.但是比它们更加宽松. javascript 中的一切都是严格区分大小写的.例如变量: demo 和 Demo 两个变量是完全不同的. javascript 标示符,所谓标示符 是指 变量.函数.属性 的名字或函数的参数.标示符的格式是按照以下规则组合的一个或多个字符. 1.第一个字符必须是字母,下划线,或 $ 符号. 2.其他字符可以是字母.下划线.$ . 或数字. 注意 不能把关键字 保留

Javascript.01 -- Javascript基础

Javascript基础 1 聊聊Javascript 1.1 Javascript的历史来源 94年网景公司   研发出世界上第一款浏览器. 95年 sun公司   java语言诞生 网景公司和sun合作. Java+script   ===> javascript 1.2 W3c规范 ?结构标准        html ?表现标准   css ?行为标准      js 1.3 JavaScript和ECMAScript的关系 ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协

javascript基础学习（十五）

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的secure 一.cookie介绍 cookie实际上就是一些信息,这些信息以文件的形式存储在客户端计算机上.在javascript中,cookie主要用来保存状态,或用于识别身份. 二.创建与获取cookie 创建cookie的语法代码如下所示:document.cookie="name=value&q

javascript基础学习（八）

javascript之日期对象 学习要点: 日期对象 将日期对象转换为字符串 将日期对象中的日期和时间转换为字符串 日期对象中的日期 日期对象中的时间 设置日期对象中的日期 设置日期对象中的时间 与毫秒相关的方法 一.日期对象 在javascript中并没有日期型的数据类型,但是提供了一个日期对象可以操作日期和时间. 日期对象的创建: new Date(); 二.将日期对象转换为字符串 将日期对象转换为字符串可以使用以下4种方法: date.toString();//将日期对象转换为字符串时,采

javascript基础学习（二）

javascript的数据类型 学习要点: typeof操作符 五种简单数据类型:Undefined.String.Number.Null.Boolean 引用数据类型:数组和对象 一.typeof操作符 typeof操作符用来检测变量的数据类型,操作符可以操作变量也可以操作字面量. 对变量或值运用typeof操作符得到如下值: undefined----如果变量是Undefined类型: boolean-------如果变量是Boolean类型: number-------如果变量是Numbe