JavaScript 入门案例

最新推荐文章于 2022-04-20 20:43:22 发布
最新推荐文章于 2022-04-20 20:43:22 发布
阅读量135 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/IT-LFP/p/10935124.html
版权

四、  JavaScript 入门案例

 

在看本节之前，笔者建议您先看 JavaScript 基础篇  https://www.cnblogs.com/IT-LFP/p/10945884.html 

 

1.  瀑布流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>布局-瀑布流</title>

    <link rel="stylesheet" href="css/layout.css" />
    <script src="js/layout.js"></script>
</head>
<body>
<div id="container">
    <div class="box">
        <div class="box_img">
            <a href="img/1.jpg"><img src="img/1.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/2.jpg"><img src="img/2.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/3.jpg"><img src="img/3.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/4.jpg"><img src="img/4.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/5.jpg"><img src="img/5.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/6.jpg"><img src="img/6.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/7.jpg"><img src="img/7.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/8.jpg"><img src="img/8.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/9.jpg"><img src="img/9.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/10.jpg"><img src="img/10.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/11.jpg"><img src="img/11.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/12.jpg"><img src="img/12.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/13.jpg"><img src="img/13.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/14.jpg"><img src="img/14.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/15.jpg"><img src="img/15.jpg" alt="" ></a>
        </div>
    </div>
    <div class="box">
        <div class="box_img">
            <a href="img/6.jpg"><img src="img/16.jpg" alt="" ></a>
        </div>
    </div>
</div>
</body>
<script>
window.onload = function () {
    imgLocation("container", "box");
    var imgData = {
        "data": [
            {"src": "2.jpg"}, {"src": "4.jpg"}, {"src": "6.jpg"}, {"src": "8.jpg"}, {"src": "10.jpg"}, {"src": "12.jpg"}, {"src": "14.jpg"}, {"src": "16.jpg"},
            {"src": "1.jpg"}, {"src": "3.jpg"}, {"src": "5.jpg"}, {"src": "7.jpg"}, {"src": "9.jpg"}, {"src": "11.jpg"}, {"src": "13.jpg"}, {"src": "15.jpg"}
        ]
    };
    window.onscroll = function () {
        if (checkFlag()) {
            var cparent = document.getElementById("container");
            for (var i in imgData.data) {//添加图片节点
                //console.log(i);
                var ccontent = document.createElement("div");
                ccontent.className = "box";
                cparent.appendChild(ccontent);
                var boximg = document.createElement("div");
                boximg.className = "box_img";
                ccontent.appendChild(boximg);
                var aimg = document.createElement("a");
                aimg.href = "img/" + imgData.data[i].src;
                boximg.appendChild(aimg);
                var img = document.createElement("img");
                img.src = "img/" + imgData.data[i].src;
                aimg.appendChild(img);
            }
            imgLocation("container", "box");
        }
    }
};

function checkFlag() {
    var cparent = document.getElementById("container");
    var ccontent = getChildrenElement(cparent, "box");
    var lastContentHeight = ccontent[ccontent.length - 1].offsetTop;
    var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
    var pageHeight = document.documentElement.clientHeight || document.body.clientHeight;
    //console.log(lastContentHeight + ":" + scrolltop + ":" + pageHeight);
    if (lastContentHeight < scrolltop + pageHeight)
        return true;
}

//将content储存在数组中
function getChildrenElement(parent, content) {
    var contentArr = [];
    var contentAll = parent.getElementsByClassName(content);
    //console.log(contentAll.length);
    for (var i = 0; i < contentAll.length; i++) {//为什么这里不能用var i in contentAll
        contentArr.push(contentAll[i]);
    }
    return contentArr;
}

//将parent下所有的content取出
function imgLocation(parent, content) {
    var cparent = document.getElementById(parent);
    var ccontent = getChildrenElement(cparent, content);
    var imgWidth = ccontent[0].offsetWidth;
    var cols = Math.floor(document.documentElement.clientWidth / imgWidth);
    //console.log(cols);
    cparent.style.cssText = "width:" + imgWidth * cols + "px;margin:0 auto";

    //获取衔接点
    var boxHeightArr = [];
    for (var i in ccontent) {
        if (i < cols) {
            boxHeightArr[i] = ccontent[i].offsetHeight;
            //console.log(boxHeightArr[i]);
        } else {
            var minHeight = Math.min.apply(null, boxHeightArr);
            //console.log(minHeight);
            var minIndex = getMinIndex(boxHeightArr, minHeight);
            ccontent[i].style.position = "absolute";
            ccontent[i].style.top = minHeight + "px";
            ccontent[i].style.left = ccontent[minIndex].offsetLeft + "px";
            boxHeightArr[minIndex] += ccontent[i].offsetHeight;

        }
    }
}

function getMinIndex(boxHeightArr, minHeight) {
    for (var i in boxHeightArr)
        if (boxHeightArr[i] == minHeight)
            return i;
    return -1;
}
</script>
</html>
View Code

 

2.  3D翻页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D翻页轮播</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: url("img/0.jpg") no-repeat center/100%;
            /*overflow: hidden;*/
        }

        .wrap {
            position: relative;
            width: 1000px;
            height: 612px;
            margin: 100px auto;
            background: url("img/0.jpg") no-repeat 100%;
            perspective: 6000px; /*3d景深*/
            box-shadow: 0 0 18px pink;
        }

        .left, .right {
            position: absolute;
            right: 0;
            top: 0;
            width: 50%;
            height: 100%;

        }

        .left {
            transform: rotateY(0deg);
            transform-origin: left;
            transform-style: preserve-3d; /*3d属性*/
            z-index: 1;
        }

        .on {
            transform: rotateY(-180deg);
            transition: transform 1.5s ease-in-out;
        }

        .right {
            background: url("img/1.jpg") no-repeat right top 50%;
        }

        .prev, .next {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .prev {
            background: url("img/0.jpg") no-repeat right top 50%;
        }

        .next {
            background: url("img/1.jpg") no-repeat left top 50%;
            transform: translateZ(-1px) scale(-1, 1); /*scale(x,y)负值可以达到镜像,translateZ(-1px)改变层次*/
        }

    </style>
</head>
<body>
<div class="wrap">
    <div class="left">
        <div class="prev"></div>
        <div class="next"></div>
    </div>
    <div class="right"></div>
</div>
</body>
<script>
    /**
     * 防止全局变量污染
     */
    (function () {
            var oLeft = document.querySelector(".left");//获取元素querySelector(".left");
            var oPrevImg = document.querySelector(".prev"),
                oNextImg = document.querySelector(".next"),
                oWrapImg = document.querySelector(".wrap"),
                oRightImg = document.querySelector(".right"),
                oBodyImg = document.querySelector("body");

            var index = 0,//当前第几张图
                isClick = false;//多次点击的开关

            function change() {
                if (isClick) return;
                isClick = true;
                index++;
                index %= 4;
                oLeft.classList.add("on");//添加类名,可维护性
                document.addEventListener("transitionend", function () {//transitionend
                    oLeft.classList.remove("on");
                    oBodyImg.style.backgroundImage =
                        oPrevImg.style.backgroundImage =
                            oWrapImg.style.backgroundImage = "url('img/" + index + ".jpg')";

                    oNextImg.style.backgroundImage =
                        oRightImg.style.backgroundImage = "url('img/" + (index + 1) % 4 + ".jpg')";
                    isClick = false;
                });
            }

            document.onclick = function () {
                change();
            }

        }
    )();
</script>
</html>
View Code

 

3.  网易轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网易轮播图</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 1200px;
            height: 367px;
            margin: 80px auto;
        }

        .wrap .imgBox ul {
            position: relative;
            width: 1200px;
            height: 336px;
            overflow: hidden;
        }

        .wrap .imgBox ul li {
            position: absolute;
            list-style: none;
            width: 730px;
            height: 336px;
            transition: transform .2s ease;
        }

        .wrap .imgBox ul .list1 {
            z-index: 1;
            transform: scale(0.81);
            transform-origin: 0 100%;
        }

        .wrap .imgBox ul .list2 {
            z-index: 2;
            transform: translateX(235px);
        }

        .wrap .imgBox ul .list3 {
            z-index: 1;
            transform: translateX(730px) scale(0.81);
            transform-origin: 100% 100%;
        }

        .wrap .imgBox ul .list4 {
            transform: translateX(965px) scale(0.81);
            transform-origin: 100% 100%;
        }

        .wrap .imgBox ul .list5 {
            transform: translateX(1200px) scale(0.81);
            transform-origin: 100% 100%;
        }

        .wrap .imgBox ul .list6 {
            transform: translateX(1435px) scale(0.81);
            transform-origin: 100% 100%;
        }

        .wrap .imgBox ul li img {
            width: 730px;
            height: 336px;

        }

        .wrap .lineBar {
            width: 1200px;
            height: 31px;
            text-align: center;
        }

        .wrap .lineBar span {
            display: inline-block;
            width: 35px;
            height: 3px;
            margin-left: 4px;
            background-color: #cccccc;
        }
    </style>
</head>
<body>
<!--
     div.wrap>(div.imgBox>ul>li.list$*6>img[src="img/0$.jpg"])+div.lineBar>span*6
     -->
<div class="wrap">
    <div class="imgBox">
        <ul>
            <li class="list1"><img src="img/01.jpg" alt=""></li>
            <li class="list2"><img src="img/02.jpg" alt=""></li>
            <li class="list3"><img src="img/03.jpg" alt=""></li>
            <li class="list4"><img src="img/04.jpg" alt=""></li>
            <li class="list5"><img src="img/05.jpg" alt=""></li>
            <li class="list6"><img src="img/06.jpg" alt=""></li>
        </ul>
    </div>
    <div class="lineBar"><span></span><span></span><span></span><span></span><span></span><span></span></div>
</div>
</body>
<script>
    (function () {
        var listArray = document.querySelectorAll(".wrap .imgBox ul li"),
            lineBar = document.querySelectorAll(" .wrap .lineBar span"),
            oImgBox = document.querySelector(".wrap .imgBox"),
            oName = [],
            index = 0,
            listLength = listArray.length;
        for (var item of listArray) {
            oName.push(item.className);
        }

        function nextPic() {//把最后一个放到第一个位置
            oName.unshift(oName[5]);
            oName.pop();
            for (var i = 0; i < listLength; i++)
                listArray[i].className = oName[i];
            index++;
            index %=6;
            changeColor();
        }

        function prePic() {//把第一个放到最后一个位置
            oName.push(oName[0]);
            oName.shift();
            for (var i = 0; i < listLength; i++)
                listArray[i].className = oName[i];
            index--;
            if (index<0) index=5;
            changeColor();
        }

        function changeColor() {
            for (var i = 0; i < listLength; i++) {
                if (i == index)
                    lineBar[index].style.backgroundColor = "green";
                else
                    lineBar[i].style.backgroundColor = "#cccccc";
            }
        }
        changeColor();

        var eleSel = ["list1", "list3"];
        var eleAct = ["prePic", "nextPic"];
        oImgBox.addEventListener("click", function (e) {
            var e = e || window.event;
            var ele = e.target.parentNode.getAttribute("class");
            if (ele == "list3") nextPic();
            if (ele == "list1") prePic();
            //window[eleAct[eleSel.indexOf(ele)]]();
        });
    })();
</script>
</html>
View Code

 

4.  京东轮播图

//京东轮播图
(function () {
    var oLefter = document.querySelector(".j-content .content-wrap01 .content02 .lefter");
    var oRighter = document.querySelector(".j-content .content-wrap01 .content02 .righter");
    var oImages = document.querySelectorAll(".j-content .content-wrap01 .content02 .banner-img a");
    var oCircle = document.querySelectorAll(".j-content .content-wrap01 .content02 .circle span");
    var oBanner = document.querySelector(".j-content .content-wrap01 .content02");
    var index = 0;
    var lastIndex = 0;
    var timer = 0;//定时器的返回值是number类型

    //方向点击切换
    oLefter.onclick = function () {
        change(function () {
            index--;
            if (index < 0) index = oImages.length - 1;
        });
    };
    oRighter.onclick = function () {
        rightChange();
    };

    function rightChange() {
        change(function () {
            index++;
            index %= oImages.length;
        });
    }

    //鼠标移动到圆的切换
    for (var i = 0; i < oCircle.length; i++) {
        oCircle[i].index = i;//在每个圆中自定义一个index属性,核心点
        oCircle[i].onmouseover = function (e) {
            change(function () {
                index = e.currentTarget.index;//核心点,想想为什么不能用this.index
            });
        }
    }

    //自动轮播
    function auto() {
        timer = setInterval(function () {
            rightChange();
           // console.log(index);
        }, 3000);
    }
    auto();

    //鼠标进入轮播图清除定时时间
    oBanner.onmouseenter = function () {
        clearInterval(timer);
    };
    //鼠标移出自动轮播
    oBanner.onmouseout = function () {
        clearInterval(timer);//清除重复的定时器,修复bug
        auto();
    };

    //change函数
    function change(callback) {
        //prev
        oImages[lastIndex].classList.remove("banner-on");//className = '';
        oCircle[lastIndex].classList.remove("circle-on");
        //index变化
        callback && callback();//防止报错
        //next
        oImages[index].classList.add("banner-on");//className="banner-on";
        oCircle[index].classList.add("circle-on");
        //lastIndex变化
        lastIndex = index;
    }
})();
View Code

 

5.  京东公告栏和线条跟随

(function () {
    var oLine = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .line"),
        oPromotion = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .a2-1"),
        oNotice = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .a2-2");
    var promote = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .promotion"),
        note = document.querySelector(".j-content .content-wrap01 .content04 .item .li-2 .notice");

    //促销栏和下划线的显示
    oPromotion.onmouseenter = function () {
        oLine.classList.remove("line-on");
        oLine.addEventListener("transitionend", function () {
            note.classList.add("text-none");
            promote.classList.remove("text-none");
        });
    };

    //公告栏和下划线的显示
    oNotice.onmouseenter = function () {
        oLine.classList.add("line-on");
        oLine.addEventListener("transitionend", function () {
            promote.classList.add("text-none");
            note.classList.remove("text-none");
        });
    }

})();
View Code

 

6.  京东秒杀

/*京东秒杀*/

(function () {
    var timeData = {//获取时间数据
        oHours: document.querySelector(".j-content .content-wrap02 .flashDeals a ul .flashTimer .hours"),
        oMinimums: document.querySelector(".j-content .content-wrap02 .flashDeals a ul .flashTimer .minimums"),
        oSeconds: document.querySelector(".j-content .content-wrap02 .flashDeals a ul .flashTimer .seconds"),
    };


    //计时器
    function timer(time) {
        if (Number(time.oSeconds.innerHTML) > 0) {
            change(time.oSeconds);
        } else {
            if (Number(time.oMinimums.innerHTML) > 0) {
                change(time.oMinimums);
                time.oSeconds.innerHTML = 59;
            } else {
                if (Number(time.oHours.innerHTML) > 0) {
                    change(time.oHours);
                    time.oMinimums.innerHTML = 59;
                    time.oSeconds.innerHTML = 59
                } else {
                    clearInterval();
                }
            }
        }
    }

    //计时变化
    function change(data) {
        var count = Number(data.innerHTML);
        // console.log(typeof  data.innerHTML);
        count--;
        if (count < 10)
            data.innerHTML = "0" + count;
        else
            data.innerHTML = count;
    }

    //定时
    setInterval(function () {
        timer(timeData);
    }, 1000);

})();
View Code

 

7.  京东搜索框热词推荐

/*热词变化*/
(function () {
    var data01 = ["海尔空调", "烧烤炉", "奶瓶消毒器", "挂烫机", "云南白药牙膏", "U盘16G", "魅族手机", "油烟机"];
    var data02 = ["1元享800M", "家电清凉节", "建材3件8折", "巴味渝珍李"];
    var length01 = data01.length,
        index01 = 0,
        length02 = data02.length,
        index02 = 0,
        timer02 = 0;

    var oPlaceholder = document.querySelector(".search-wrap .search-box .searcher .searchText"),
        oHotWords = document.querySelector(".search-wrap .search-hotWords .a-1");

    var flag = false;

    //placeholder的热词切换
    setInterval(function () {
        if (!flag) {
            index01++;
            index01 %= length01;
            oPlaceholder.setAttribute("placeholder", data01[index01]);
        }
    }, 5000);

    //搜索框获取和失去焦点时,placeholder的热词消失和出现
    oPlaceholder.onfocus = function () {
        flag = true;
        oPlaceholder.setAttribute("placeholder", "");
    };
    oPlaceholder.onblur = function () {
        flag = false;
        oPlaceholder.setAttribute("placeholder", data01[index01]);
    };


    //推荐热词的切换函数
    function auto() {
        timer02 = setInterval(function () {
            index02++;
            index02 %= length02;
            oHotWords.innerHTML = data02[index02];
        }, 3000);
    }

    auto();
    //鼠标移入后,推荐热词停止切换
    oHotWords.onmouseenter = function () {
        clearInterval(timer02);
    };
    //鼠标移出后,推荐热词继续切换
    oHotWords.onmouseout = function () {
        clearInterval(timer02);
        auto();
    };

})();
View Code

 

 

 

转载于:https://www.cnblogs.com/IT-LFP/p/10935124.html

dianxun5648
关注
JavaScript 入门基础&案例
shhghvvh的博客
11-22 365
js基础知识及案例练习
JavaScript入门实例(1)
小九九(●'◡'●)
03-07 478
1.按键事件实现改变文字内容 <!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript</title> <script type="text/javascript"> function changetext(){ document.getElementById("text").innerHTML="Hello！JavaScript
JavaScript入门小案例
weixin_30858241的博客
03-30 190
笔记： <!-- JavaScript的特点： 1.基于对象和事件驱动 JavaScript把HTML页面中的每一个元素都当做一个对象来处理，并且这些对象都具有层次关系， 像一颗倒立的树，这种关系被称为“文档对象模型（DOM）”...
JavaScript入门学习案例
热门推荐
itboy
06-26 5万+
JavaScript入门学习案例 test01.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS的引用方式</title> <style> div{ width:100px; height:100px; bac
javascript入门实例一
Zhujl
02-20 423
工具:eclipese 第一步:建立动态的web项目<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第一个javascript小程序</title> <script type="text/javascript"> alert("javascript你好啊，小程序") document.write("java
JavaScript入门案例之实现超级玛丽小游戏
12-01
"JavaScript入门案例之实现超级玛丽小游戏"就是一个很好的实例，它将帮助我们掌握JavaScript的基础语法、事件处理、DOM操作以及游戏逻辑的构建。这个项目由徐守威提供，旨在让学习者在实践中了解JavaScript的核心...
超详细JavaScript入门基础+练手小案例
weixin_55643605的博客
10-28 3029
一.什么是JavaScript 它是一种浏览器解释型语言，嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的 动态效果，用户交互及前后端的数据传输等。 它由下列三部分组成： 1.核心语法：规范JavaScript的基本语法。 2.BOM：提供了一系列操作浏览器的方法。 3.DOM：提供了一系列操作文档的方法。 二.使用方法 将JavaScript嵌入页面有以下三种方式： 1.元素绑定事件 事件：指用户的行为（单击，双击等）。 事件处理：元素监听事件，并在事件发生后自动执行事件过程
Cesium 入门案例 Cesium 入门案例
05-29
这个"入门案例"将引导我们深入了解如何利用Cesium进行地理空间数据的展示和操作。Cesium提供了丰富的功能，包括地形渲染、卫星图像集成、3D模型加载、飞行路径规划等，使得开发者无需复杂的3D图形编程知识就能构建出...
JavaScript基础案例篇（题目附代码）
qq_66193208的博客
04-20 8758
这篇文章的代码难度循序渐进，从最基础的变量使用开始，慢慢去提升js的兴趣（这里使用的软件是vscode）
以下是 JavaScript 的入门教程及开发案例
最新发布
09-16
avaScript 是一种广泛用于网页开发的编程语言，运行在用户的浏览器中，主要用于实现网页的交互功能。它是 Web 开发的三大核心技术之一，另外两者是 HTML 和 CSS。 以下是 JavaScript 的入门教程及开发案例。
js入门20个小案例，总结书本源代码
11-02
js入门20个小案例，循序渐进，一步一步学习js，简单的教学js案例
200 个经典的js小例子。
02-09
JS 200 个经典的js小例子,很有用！
600套JavaScript案例低分分享
05-11
600个JavaScript基础小案例，适合初学者使用，已经根据技术点进行了分类。源文件2中可以通过访问index.htm页面进行总览查看效果。
js实例大全 js实例
03-29
js实例大全、js实例大全、js实例大全、js实例大全、js实例大全、js实例大全、js实例大全、js实例大全、js实例大全、js实例大全、
DOM（二）
zhr_beyond的博客
03-05 601
DOM（二） 1.排他思想 首先先排除其他人，然后才设置自己的样式 这种排除其他人的思想我们成为排他思想 例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-sale=1.0, maximum-scale=1.0, minimum
前端入门小练习，JavaScript基础案例
weixin_45881749的博客
06-21 626
前端入门小练习，JavaScript基础案例 今天分享三个适合前端新手入门，小白练习的几个案例 模仿电影院选座事件 京东放大镜效果 模态框拖拽事件 模仿电影院选座事件 <script> alert('欢迎来到My Lucky Cinema'); var lis = document.querySelectorAll('li'); for(var i = 0;i<lis.length;i++) { lis[i].ad
JavaScript入门
微风洋洋的博客
02-10 9438
JavaScript入门秘籍，欲练此功，关注有功
javaScript入门综合小案例
Rolling_stones的博客
12-19 223
JavaScript综合案例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin: auto; width: 500px;
JavaScript事件三要素（小案例实现）
天明的博客
10-30 2335
js的基础为HTML与CSS，那么在实现对他们进行一些交互操作时我们首先要明白的是事情三要素 事件三要素： 1.事件源（你是要对什么东西进行操作） 2.事件（你要做什么实现所要的交互效果） 3.处理函数（在事件进行后你要目标变成什么样子） 案例： 下面小编举一个很简单的例子去根据事件三要素来进行操作（非常简明的一个例子那么我们只需要实现点击按钮去实现操作）： 对于像小编一样初学j...
"JavaScript入门实例源码案例及基础知识介绍
JavaScript是一门客户端脚本语言，它运行在浏览器中，并且每个浏览器都有自己的JavaScript解析引擎。JavaScript是一种脚本语言，就是说它不需要编译就可以直接被浏览器解析执行。JavaScript的功能在于增强用户和HTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值