miracaly commented 6 years ago

请同学们在本帖中签到格式如下：00俞淑燕今天课程完成的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .win {
                width: 300px;
                height: 300px;
                background-color: #dfd;
                margin: auto;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                opacity: 0;
                /*display: none;*/
                z-index: 1000;
            }

            .win.show{
                opacity: 1;
            }

        </style>

        <link rel="stylesheet" href="css/animate.css" />
        <link rel="stylesheet" href="css/font-awesome.min.css" />
    </head>
    <body>
        <div id ="btn" class="animated bounce">
            你好，请点击这里
            <!--<i class="fa fa-address-book"></i>-->
            <i class="fa fa-th-list"></i>
            <!--<i class="fa fa-th"></i>-->
        </div>

        <script type="text/javascript">
            var btn = document.getElementById('btn');
            var oWin;

            oWin = document.createElement("div");
            oWin.id = "win";
            oWin.className = "win";
            document.body.appendChild(oWin);

            btn.addEventListener('click',showWin);

            function showWin(){
                var event = event||window.event;
                var target = event.target||event.srcElement;

                oWin.classList.add('show');
                oWin.classList.add('bounce');
                oWin.classList.add('animated');

                if(target.classList.contains('fa-th-list')){
                    target.classList.remove('fa-th-list');
                    target.classList.add('fa-th');
                }else{
                    target.classList.add('fa-th-list');
                    target.classList.remove('fa-th');
                }
            }

        </script>
    </body>
</html>

SDQ997 commented 6 years ago

12沈丹青今天课程完成的代码如下： <!DOCTYPE html>

皮肤1 皮肤2

前端开发

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。

较强的视觉设计

前端技术包括4个部分：前端美工、IE兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等.

根据该词可以做这样的理解,用互联网来做比喻,凡是通过浏览器到用户端计算机的统称为前端技术.相反存贮于服务器端的统称为后端技术.

huojibufei commented 6 years ago

网页换肤 08姜凯今天课程完成的代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>网页换肤</title>
        <link id="link" rel="stylesheet" href="css/css1.css" />
    </head>
    <body>
        <a id="a1" href="javascript:">皮肤1</a>&nbsp;&nbsp;<a id="a2" href="javascript:">皮肤2</a>
        <h1>前端开发</h1>
        <p>Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。2005年以后，互联网进入Web 2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。 以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。</p>
        <h1>较强的视觉设计</h1>
        <p>前端技术包括4个部分：前端美工、IE兼容、CSS、HTML“传统”技术与Adobe AIR、Google Gears,以及概念性较强的交互式设计,艺术性较强的视觉设计等等.</p>
        <p>根据该词可以做这样的理解,用互联网来做比喻,凡是通过浏览器到用户端计算机的统称为前端技术.相反存贮于服务器端的统称为后端技术.</p>
        <script type="text/javascript">
            var a1=document.getElementById('a1');
            var a2=document.getElementById('a2');
            var lk=document.getElementById('link');
            a1.onclick=function(){
                lk.href="css/css1.css";
            }
            a2.onclick=function(){
                lk.href="css/css2.css";
            }
        </script>
    </body>
</html>

body{
    background: #F06431;
    color:#fff;
}
a{
    color: #fff;
}
h1{
    font-size: 20px;
    text-decoration: underline;
}
p{
    font-size:14px;
    text-indent: 2em;
    line-height: 1.5em;
}

Annabelle6301 commented 6 years ago

36 黄小翠今天课程完成的代码如下（菜单）： <!DOCTYPE html>

菜单

Annabelle's menu

chen0704 commented 6 years ago

31 陈汇今天课程完成的代码如下：模拟窗口

<body>
    <a href="javascript:" class="test" data-content="打开窗口">窗口案例</a>
    <div class="test" data-content="点击内容" style="cursor: pointer;">
        请点击！
    </div>
    <script type="text/javascript">
        var oTest = document.getElementsByClassName('test');
        var oWin, oBtn, oContent,oMask;
        if(oTest.length >= 1) {
            oWin = document.createElement("div");
            oWin.id = "win";
            oWin.className = "win";
            document.body.appendChild(oWin);

            oBtn = document.createElement("div");
            oBtn.id = "btn";
            oBtn.className = "btn";
            oBtn.innerHTML = "<i class='fa fa-close'></i>";
            oWin.appendChild(oBtn);

            oBtn.addEventListener("click", closeWin);

            oContent = document.createElement("div");
            oContent.className = "content";
            oWin.appendChild(oContent);

            oMask = document.createElement("div");
            oMask.className = "mask";
            document.body.appendChild(oMask);

            for(var i = 0; i < oTest.length; i++) {
                oTest[i].addEventListener("click", openWin);

            }
        } else {
            document.write("没有可以模拟窗口的对象");
        }

        function openWin(event) {
            oMask.classList.add('show');
            oWin.classList.add('show');
            oContent.innerHTML = event.target.dataset.content;
        }

        function closeWin(event) {
            oMask.classList.remove('show');
            oWin.classList.remove('show');
            oContent.innerHTML = "";
        }
    </script>
</body>

LXJyy commented 6 years ago

38 李雄俊切换皮肤效果 <!DOCTYPE html>

原来你喜欢这个颜色哇！

jycxh11 commented 6 years ago

17 蒋轶聪今天课程完成的代码如下： <!DOCTYPE html>

图片全屏效果

changehe commented 6 years ago

20 何桂清今天课程完成的代码如下： <!DOCTYPE html>

RNGtuanzhang commented 6 years ago

24 徐炜昊网页换肤

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link id="link" rel="stylesheet" type="text/css" href="css/css1.css"/>
    </head>
    <body>
        <a id="a1" href="javascript:">皮肤一</a>&nbsp;&nbsp;<a id="a2" href="javascript:">皮肤二</a>
        <script type="text/javascript">
            var a1=document.getElementById("a1");
            var a2=document.getElementById("a2");
            var lk=document.getElementById("link");
            a1.onclick=function(){
                lk.href="css/css1.css";
            }
            a2.onclick=function(){
                lk.href="css/css2.css";
            }
        </script>
    </body>
</html>
  css/css1.css
  body{ 
        background: grey;
        color:#fff;
  }
  a{     
        color: #fff;
  }
  css/css2.css
  body{
        background: darkseagreen;
        color:#fff;
  }
  a{
        color: #fff;
  }

yuyinchao commented 6 years ago

21 余银超今天完成的代码如下（模拟窗口）： <!DOCTYPE html>

Zs2364 commented 6 years ago

37 曾思思今天课程完成的代码如下：换肤效果

网页换肤

css/css1.css body{ background: pink; color:#fff; } a{ color: #fff; }

css/css2.css body{ background: deepskyblue; color:#fff; } a{ color: #fff; }

皮肤1 皮肤2

前端开发

Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览。

huojibufei commented 6 years ago

随机背景 08姜凯

<!doctype html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document </title>
    <style type="text/css">
        #banner{
            width: 840px;
            height: 372px;
            margin: 0 auto; 
            position: relative;
            box-shadow: 1px 1px 4px 0 rgba(0,0,0,.2);
        }
        #banner .tip{
            position: absolute;
            left: 2em;
            top: 2em;
            color: #fff;
        }
    </style>
</head>
<body id="bd">
    <div id="banner">
        <div class="tip">刷新页面体验随机效果</div>
    </div>
    <script type="text/javascript">
        var sStr="1.jpg|2.jpg|3.jpg|4.jpg";
        var aStr=sStr.split("|");
        var oBanner=document.getElementById('banner');
        var num=parseInt(Math.random()*4);
        oBanner.style.backgroundImage="url(img/"+aStr[num]+")";
    </script>
</body>
</html>

xutaomei commented 6 years ago

47 许桃美今天课程完成的代码如下（网页换肤）：

<head>
    <meta charset="utf-8" />
    <link id="a" rel="stylesheet" type="text/css" href="css/css1.css"/>
    <title></title>

</head>
<body>
    <a id="b" href="javascript:">皮肤1</a>
    <a id="c" href="javascript:">皮肤2</a>
    <h1>再别康桥</h1>
    <p>轻轻的我走了，</p>
    <p>正如我轻轻的来；</p>
    <p>我轻轻的招手，</p>
    <p>作别西天的云彩。</p>
    <p>那河畔的金柳，</p>
    <p>是夕阳中的新娘；</p>
    <p>波光里的艳影，</p>
    <p>在我的心头荡漾。</p>
    <p>软泥上的青荇，</p>
    <p>油油的在水底招摇；</p>
    <p>在康河的柔波里，</p>
    <p>我甘心做一条水草！</p>
    <script type="text/javascript">
        var a=document.getElementById('a')
        var b=document.getElementById('b')
        var c=document.getElementById('c')
        b.onclick=function(){
            a.href="css/css1.css";
        }
        c.onclick=function(){
            a.href="css/css2.css";
        }

    </script>
</body>

css1代码如下： body{

background:white ;
color:silver;

}

css2代码如下： body{

background-color: black;
color:silver;

}

fanhuazZ commented 6 years ago

09 陆文涛今天完成的代码如下： <!DOCTYPE html>

请选择人数

dayday12 commented 6 years ago

34 冯盛鹏今天完成的代码如下 <!DOCTYPE html>

zyt123456 commented 6 years ago

46 张益桐今天课程完成的代码如下（放大镜效果）：代码如下：

<body>
    <img src="img/2.jpg" class="zoomPic" />
    <img src="img/2.jpg" class="zoomPic" />
    <img src="img/2.jpg" class="zoomPic" />
    <img src="img/2.jpg" class="zoomPic" />
    <img src="img/2.jpg" class="zoomPic" />
    <img src="img/2.jpg" class="zoomPic" />
    <img src="img/2.jpg" class="zoomPic" />
    <img src="img/2.jpg" class="zoomPic" />
    <img src="img/2.jpg" class="zoomPic" />

    <script type="text/javascript">
        (function() {
            var ratio = [];
            var winWidth=window.innerWidth;
            var winHeight=window.innerHeight;
            var zoom = document.querySelectorAll('.zoomPic');
            if(zoom.length == 0) {
                return false;
            }
            var zoomHandler = document.createElement('div');
            zoomHandler.className = 'zoomHandler';
            document.body.appendChild(zoomHandler);

            for(var i = 0; i < zoom.length; i++) {

                zoom[i].addEventListener("load", (function(n) {
                    return function() {
                        ratio[n] = zoom[n].naturalWidth / zoom[n].width;
                    }
                })(i));

                zoom[i].addEventListener("mousemove", (function(n) {
                    return function(event) {

                        if(ratio[n] <= 1) {
                            return false;
                        }

                        var event = event || window.event;
                        var target = event.target || event.srcElement;
                        //x,y 相对于浏览器的位置
                        var cx = event.clientX;
                        var cy = event.clientY;
                        //ox,oy 相对于图像的位置
                        var ox=event.offsetX||event.layerX;
                        var oy=event.offsetY||event.layerY;

                        var zoomShowWidth = 100;
                        var zoomShowHeight = 100;

                        zoomHandler.style.width = zoomShowWidth + "px";
                        zoomHandler.style.height = zoomShowHeight + "px";
                        zoomHandler.style.left = cx + "px";
                        zoomHandler.style.top =  cy + "px"; 
                        zoomHandler.style.backgroundImage = 'url(' + target.src + ')';
                        zoomHandler.style.backgroundPosition = (-ratio[n] *ox + zoomShowWidth / 2) + "px "+(-ratio[n] * oy + zoomShowHeight / 2) + "px";
                        zoomHandler.style.display = "block";
                    }
                })(i));
                zoom[i].addEventListener("mouseout", function() {
                    zoomHandler.style.display = "none";
                });
            }

        })();
    </script>
</body>

css代码：body { min-height: 1000px; padding: 0; margin: 0; }

        .zoomPic {
            width: 400px;
            margin: 30px;
            position: relative;
            border: 1px solid rgba(0, 0, 0, .1);
            z-index: 1;
        }

        .zoomHandler {
            position: fixed;
            border: 1px solid rgba(0, 0, 0, .1);
            background: rgba(255, 255, 255, .2);
            box-shadow: 0px 0px 2px rgba(0,0,0,.5);
            z-index: 1000;
            border-radius: 100px;
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

laojinke commented 6 years ago

22 劳锦锞今天的完成的代码全屏图像滚动效果如下 <!DOCTYPE html>

z1429170900 commented 6 years ago

28 郑涛模拟窗口如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>123456789</title>
        <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
        <style type="text/css">
            #window{
                margin: auto;
                margin-top: 100px;
                width: 400px;
                height: 300px;
                color: black;
                background: blanchedalmond;
                position: relative;
                display: none;
            }
            #window a{
                position: absolute;
                top: 2px;
                right: 4px;
            }
            #window p{
                text-align: center;
                line-height: 300px;
            }
            #font i{
                font-size: 26px;
                color: chocolate;
            }
        </style>
    </head>
    <body>
        <a href="#" id="font"><i class="fa fa-cog"></i></a>
        <div id="window">
            <a href="#"><i class="fa fa-close"></i></a>
            <p>welcome to you</p>
        </div>
        <script type="text/javascript">
            var oFont = document.querySelector('#font');
            var oWindow = document.querySelector('#window');
            var oClose = document.querySelector('#window a');
            oFont.onclick = function(){
                oWindow.classList.add("animated");
                oWindow.classList.add("bounceIn");
                oWindow.style.display = "block";
            }
            oClose.onclick = function(){
                oWindow.style.display = "none"; 
            }
        </script>
    </body>
</html>

fywithme commented 6 years ago

19 陈黎铭今天完成的代码如下（下雪效果） <!DOCTYPE html>

snow

liuxue1234 commented 6 years ago

06 潘雪今天完成的代码如下:

数组复习： <!DOCTYPE html>

时钟回顾：

<!DOCTYPE html>

blackwhite1 commented 6 years ago

15 杜任杰今日完成的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>雪</title>
        <style type="text/css">
            body {
                background-color: black;
                background-size: cover;
                color: white;
                font-family: 'Petit Formal Script', cursive;
                overflow: hidden;
            }

            .title {
                position: absolute;
                text-align: center;
                top: 50%;
                left: 50%;
                -webkit-transform: translate3d(-50%, -50%, 0);
                transform: translate3d(-50%, -50%, 0);
                z-index: 0;
                font-size: 1.6em;
            }

            .snow {
                position: absolute;
                background-color: #fff;
                border-radius: 100%;
            }
        </style>

    </head>
    <body>
        <script type="text/javascript">
        (function(){
            var win=window.innerWidth;
            var hei=window.innerHeight;
            var num=500;
            var snowArray=new Array();
            function random(a,b){
                var c = Math.random()*( b - a );
                return c;
            }
            function Snow(){
                this.init();
                this.draw();
            }
            Snow.prototype.init = function(){
                this.x=random(0, win);
                this.y=random(-hei,0);
                this.speed=random(0.5,3);
                this.wind=random(-2,2);
                this.size=random(3,6);
                this.alpha=random(0.2,1);
            }
            Snow.prototype.draw = function(){
                this.o=document.createElement('div');
                this.o.className="snow";
                document.body.appendChild(this.o);
                this.o.style.width=this.o.style.height=this.size+"px";
                this.o.style.opacity=this.alpha;
            }
            Snow.prototype.update = function(){
                this.x+=this.wind;
                this.y+=this.speed;

                if(this.y>hei){
                    this.init();
                }
                this.o.style.left=this.x+"px";
                this.o.style.top=this.y+"px";
            }
            for(var i=0;i<num;i++){
                console.log("1");
                var snow=new Snow();
                snowArray.push(snow);
            }
            (function() {
                    for(var i = 0; i < snowArray.length; i++) {
                        snowArray[i].update();
                    }
                    requestAnimationFrame(arguments.callee);
            }());
        }());
        </script>
    </body>
</html>

Annabelle6301 commented 6 years ago

36 黄小翠今天完成代码如下（提示框）： <!DOCTYPE html>

tooltip提示框

tooltip提示框是网页中常见的组件，在网页交互中应用广泛

可实现上、下、左、右四种效果

huojibufei commented 6 years ago

08 姜凯下雪


<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            body{
                background-color: black;
                overflow: hidden;
            }
            .snow{
                position: absolute;
                background-color: #fff;
                border-radius: 100%;
            }
        </style>
    </head>

    <body>
        <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
        <script type="text/javascript">

            function random(min, max, isInt) {
                var a = min + Math.random() * (max - min);
                return isInt ? parseInt(a) : a;
            }

            var snowArray=new Array();
            var winH=window.innerHeight;
            var num=300;

            class Snow{
                constructor(){
                    this.init();
                    this.draw();
                }

                init(){
                    this.size=random(1,10,false);
                    this.alpha=random(0.1,1,false);
                    this.x=random(0,1600);
                    this.y=random(-200,0);
                    this.wind=random(-2,2);
                    this.speed=random(0.5,4);
                }

                draw(){
                    this.o=document.createElement("div");
                    this.o.className="snow";
                    document.body.appendChild(this.o);

                    this.o.style.width=this.o.style.height=this.size+"px";
                    this.o.style.opacity=this.alpha;
                    this.o.style.left=this.x+"px";
                    this.o.style.top=this.y+"px";
                }

                update(){
                    this.x+=this.wind;
                    this.y+=this.speed;

                    if(this.y>winH){
                        this.y=-2;
                    }

                    this.o.style.left=this.x+"px";
                    this.o.style.top=this.y+"px";
                }
            }

            for (var i = 0; i < num; i++) {
                var s=new Snow();
                snowArray.push(s);
            }

            (function(){
                for (var i = 0; i < snowArray.length; i++) {
                    snowArray[i].update();
                }

                requestAnimationFrame(arguments.callee);
            })();
        </script>
    </body>

</html>

yexinzhe commented 6 years ago

16 叶信哲今天课程完成的代码如下+（模拟窗口）：

模拟窗口

<body>
    <a href="javascript:" class="modal"data-toggle="popover"   data-content=" 凤兮凤兮归故乡">打开模拟窗口</a>

    <div class="modal" data-content="遨游四海求其凰">淡淡道</div>
    <script type="text/javascript">
        //alert("ok");
        var oModal = document.getElementsByClassName('modal');
        var oWin, oBtn, oContent,oMask;
        if(oModal.length >= 1) {

            oWin = document.createElement("div");
            oWin.id = "win";
            oWin.className = "win";
            document.body.appendChild(oWin);

            oBtn = document.createElement("div");
            oBtn.id = "btn";
            oBtn.className = "btn";
            oBtn.innerHTML = "<i class='fa fa-close'></i>";
            oWin.appendChild(oBtn);
            oBtn.addEventListener("click", closeWin);

            oContent = document.createElement("div");
            oContent.className = "content";
            oWin.appendChild(oContent);

            oMask = document.createElement("div");
            oMask.className = "mask";
            document.body.appendChild(oMask);
            for(var i = 0; i < oModal.length; i++) {
                oModal[i].addEventListener("click", openWin);

            }
        } else {
            document.write("没有可以模拟窗口的对象");
        }

        function openWin(event) {
            oMask.style.display = "block";
            oWin.style.display = "block";
            oContent.innerHTML = event.target.dataset.content;
        }

        function closeWin(event) {
            oMask.style.display = "none";
            oWin.style.display = "none";
            oContent.innerHTML = "";
        }
    </script>
</body>

Zs2364 commented 6 years ago

37 曾思思今日完成的代码：随机背景

随机背景

miaosha commented 6 years ago

26 盛绍斌今天完成的代码如下：模拟窗口 <!DOCTYPE html>

Zs2364 commented 6 years ago

37 曾思思今日完成的代码：选项卡

选项卡

新闻

通知

公告

新闻内容

通知内容

公告内容

fywithme commented 6 years ago

19 陈黎铭随机背景 <!DOCTYPE html>

shelyer commented 6 years ago

29 郑可琪今天课程完成的代码如下（菜单）：

菜单

Shelyer's menu

youxuezhe commented 6 years ago

03岑灏今天课程完成的代码如下： <!DOCTYPE html>

菜单练习

CSS:

{ margin: 0; padding: 0; }

.bar-menu {

z-index: 10; top: 0; left: 0; position: fixed; width: 100%; background: royalblue; }

.hamburger { font-size: 30px; }

.button { transform: none; cursor: pointer; padding: 1em; transition: .5s; }

.submenu { display: none; }

.submenu-item { list-style: none; left: -32px; background: lightskyblue; }

.side-menu { display: none; width: 250px; position: absolute; top: 85px; height: 100vh; background: lightskyblue; }

.menu { cursor: pointer; list-style: none; }

.menu li {

padding: 1em 2em; }

.menu-item { font-size: 18px; /color: #fff;/ text-decoration: none; }

.fa-angle-right { padding-left: .3em; }

miaosha commented 6 years ago

26 盛绍斌随机背景 <!DOCTYPE html>

tehend commented 6 years ago

27 王海波今日完成代码： <!DOCTYPE html>

huojibufei commented 6 years ago

08 姜凯模拟窗口

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            .win {
                width: 300px;
                height: 300px;
                background-color: #dfd;
                margin: auto;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                opacity: 0;
                z-index: 1000;
            }

            .win .btn {
                position: absolute;
                right: 10px;
                top: 10px;
                cursor: pointer;
                z-index: 2;
            }

            .win .content {}

            .mask {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0;
                top: 0;
                background-color: rgba(0, 0, 0, .2);
                z-index: 100;
                display: none;
                transition: all .5s;
            }
            .show{
                display: block;
            }

        </style>
        <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    </head>

    <body>
        <a href="javascript:" class="modal" data-content="模拟窗口案例">打开模拟窗口</a>
        <div class="modal" data-content="另外的一些内容">淡淡道</div>
        <script type="text/javascript">
            var oModal = document.getElementsByClassName('modal');
            var oWin, oBtn, oContent,oMask;
            if(oModal.length >= 1) {

                oWin = document.createElement("div");
                oWin.id = "win";
                oWin.className = "win";
                document.body.appendChild(oWin);

                oBtn = document.createElement("div");
                oBtn.id = "btn";
                oBtn.className = "btn";
                oBtn.innerHTML = "<i class='fa fa-close'></i>";
                oWin.appendChild(oBtn);
                oBtn.addEventListener("click", closeWin);

                oContent = document.createElement("div");
                oContent.className = "content";
                oWin.appendChild(oContent);

                oMask = document.createElement("div");
                oMask.className = "mask";
                document.body.appendChild(oMask);
                for(var i = 0; i < oModal.length; i++) {
                    oModal[i].addEventListener("click", openWin);

                }
            } else {
                document.write("没有可以模拟窗口的对象");
            }

            function openWin(event) {
                oMask.classList.add('show');
                var opacity = 0;
                var fader = setInterval(function() {
                  opacity += 0.1;
                  if (opacity <= 1) {
                    oWin.style.opacity = opacity;
                  } else {
                    clearInterval(fader);
                  }
                }, 100);
                oContent.innerHTML = event.target.dataset.content;
            }

            function closeWin(event) {
                oMask.classList.remove('show');
                oWin.style.opacity=0;
                oContent.innerHTML = "";
            }

        </script>
    </body>

</html>

wabxq commented 6 years ago

18 张虓敏今天课程完成的代码如下： ①

    <!--<a href="javascript:" onclick="sayHello();">调用</a>
    <a href="javascript:sayHello()">链接</a>
    <script type="text/javascript">
        function sayHello(){
            document.write('hellp word');
        }
    </script>-->
    <!--<input type="button" id="btn" value="变色" />
    <p id="text">Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web 1.0时代的产物，<br />
        那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。</p>
    <script type="text/javascript">
        var obtn=document.getElementById("btn");
        var otext=document.getElementById("text");
        var a=0;
        obtn.addEventListener("click",colorTest);
        function colorTest(){

            if(a%2==0){
                a+=1;
                otext.style.color="royalblue";
            }else{
                otext.style.color="red";
                a++;
            }
            console.log(a)
        }-->

        <!--<script type="text/javascript">
            var str="red|blue|green";
            var s=str.split("|");
            var all=document.getElementById("all")
            var num=parseInt(Math.random()*3);
            all.style.backgroundColor=s[num];
            console.log(s[num]);
        </script>-->
        <table id="all" border="1" style="border-collapse: collapse;width: 300px;height: 300px;">
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    <script type="text/javascript">
        var oall=document.getElementById("all");
        var otr=oall.getElementsByTagName("tr");
        var otd=oall.getElementsByTagName("td");
        for (var i=0;i<otd.length;i++) {
            otd[i].style.background="hsla("+(i%5)*10+",50%,50%,.5)";
        }
    </script>

②

</head>

<body>
    <table id="Tables">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>地址</th>
            <th>删除</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>绍兴</td>
            <td>
                <a href="javascript:">删除</a>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>男</td>
            <td>杭州</td>
            <td>
                <a href="javascript:">删除</a>
            </td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>女</td>
            <td>温州</td>
            <td>
                <a href="javascript:">删除</a>
            </td>
        </tr>
    </table>
    <input type="button" id="btn" value="添加" />
    <div id="inputs">
        <p>学号:</p><input id='a' type='text' /><br />
        <p>姓名:</p><input id='b' type='text' /><br />
        <p>性别:</p><input id='c' type='text' /><br />
        <p>地址:</p><input id='d' type='text' /><br />
    </div>
    <script type="text/javascript">
        var obtn = document.getElementById("btn");
        var tables = document.getElementById("Tables");
        var btn = document.getElementsByTagName('input')[0];
        var tds = document.querySelectorAll("td a");
        var oinput = document.getElementById("inputs");
        var oinputs = document.querySelectorAll("div input");
        var oa = document.getElementById("a");
        var ob = document.getElementById("b");
        var oc = document.getElementById("c");
        var od = document.getElementById("d");
        for(var i = 0; i < tds.length; i++) {
            tds[i].addEventListener("click", function(event) {
                event.target.parentNode.parentNode.parentNode.removeChild(event.target.parentNode.parentNode);
            });
        }
        obtn.addEventListener("click", function() {
            var odiv = document.createElement("div");
            odiv.className = "text";
            document.body.appendChild(odiv);

            var otitle = document.createElement("h1");
            otitle.className = "otitle";
            otitle.innerHTML = "信息填写表";
            odiv.appendChild(otitle);

            oinput.style.display = "block";
            odiv.appendChild(oinput);
            var obtn1 = document.createElement("button");
            obtn1.className = "btn1";
            obtn1.innerHTML = "关闭";
            obtn1.addEventListener("click", function() {
                odiv.style.display = "none";
                oall.style.display = "none";
            })
            odiv.appendChild(obtn1);

            var obtn2 = document.createElement("button");
            obtn2.className = "btn2";
            obtn2.innerHTML = "确定";
            obtn2.addEventListener("click", function() {
                var row = tables.insertRow(4);
                var cell0 = row.insertCell(0);
                var cell1 = row.insertCell(1);
                var cell2 = row.insertCell(2);
                var cell3 = row.insertCell(3);
                var cell4 = row.insertCell(4);
                cell0.innerHTML = oa.value;
                cell1.innerHTML = ob.value;
                cell2.innerHTML = oc.value;
                cell3.innerHTML = od.value;
                var Link = document.createElement('a');
                Link.innerText = "删除";
                Link.setAttribute('href', '#');
                cell4.appendChild(Link);
                Link.addEventListener("click", function(event) {
                    event.target.parentNode.parentNode.parentNode.removeChild(event.target.parentNode.parentNode);
                });
                odiv.style.display = "none";
                oall.style.display = "none";
                oinput.style.display = "none";
                oa.value = "";
                ob.value = "";
                oc.value = "";
                od.value = "";
            })
            odiv.appendChild(obtn2);

            var oall = document.createElement("div");
            oall.className = "all";
            document.body.appendChild(oall);
            for(var i = 0; i < oall.length; i++) {
                oall[i].addEventListener("click", function() {
                    odiv.style.display = "block";
                    oall.style.display = "block";
                    oinput.style.display = "block";
                });

            }
        });
    </script>

③

    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        li{
            list-style: none;
        }
        #menu1{
            font-size: 20px;
            height: 50px;
            width: 100%;
            background-color: #8BC34A;
            line-height: 50px;
            position: absolute;
            left: 0;
            top: 0;
        }
        #menu2{
            width: 170px;
            background-color: #689F38;
            position: absolute;
            left: 0;
            top: 50px;
            padding: 10px 0px 20px 0px;
            display: none;
        }
        #menu2_2{
            display: none;
        }
    </style>
</head>
<body>
    <div id="menu1">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-bars button" id='button' aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;菜单</div>
    <div id="menu2">
        <ul id="menu2_1">
            <li>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;菜单1&nbsp;&nbsp;<i class="fa fa-angle-right" id="btnRight" aria-hidden="true"></i>
                <ul id="menu2_2">
                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;菜单1—1</li>
                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;菜单1—2</li>
                    <li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;菜单1—3</li>
                </ul>
            </li>
            <li id="menu2_1">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;菜单2&nbsp;&nbsp;<i class="fa fa-angle-right" id="btnRight" aria-hidden="true"></i>
            </li>
            <li id="menu2_1">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;菜单3&nbsp;&nbsp;<i class="fa fa-angle-right" id="btnRight" aria-hidden="true"></i>                   
            </li>
            <li id="menu2_1">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;菜单4&nbsp;&nbsp;<i class="fa fa-angle-right" id="btnRight" aria-hidden="true"></i>
            </li>
            <li id="menu2_1">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;菜单5&nbsp;&nbsp;<i class="fa fa-angle-right" id="btnRight" aria-hidden="true"></i>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var oBtn=document.getElementById("button");
        var omune2=document.getElementById("menu2");
        var omune2_2=document.getElementById("menu2_2");
        var obtnRight=document.getElementById("btnRight");
        var a=0;
        var i;
        oBtn.addEventListener("click",function(){               
            if(a%2==0){
                omune2.style.display="block";
                oBtn.style.transform="rotate(90deg)";
                a++;
            }else{
                omune2.style.display="none";
                oBtn.style.transform="rotate(360deg)"
                a++;
            }               
        });
            obtnRight.addEventListener("click",function(){
            if(a%2==0){
                omune2_2.style.display="block";
                obtnRight.style.transform="rotate(90deg)";
                a++;
            }else{
                omune2_2.style.display="none";
                obtnRight.style.transform="rotate(360deg)";
                a++;
            }
        });

    </script>

jzm1201 commented 6 years ago

42 姜智孟今天课程完成的代码如下：一、 <!DOCTYPE html>

模拟窗口案例

二、知识点补遗

<!DOCTYPE html>

连接

三、全屏图像滚动效果 <!DOCTYPE html>

四、放大镜

	<!DOCTYPE html>

	<!DOCTYPE html>

五、打字效果

	<!DOCTYPE html>








	中华人民共和国万岁！


	中国共产党万岁!

LXJyy commented 6 years ago

38 李雄俊滚动窗口 <!DOCTYPE html>

jycxh11 commented 6 years ago

17 蒋轶聪 <!DOCTYPE html>

图片全屏效果

Annabelle6301 commented 6 years ago

36 黄小翠今天完成代码如下（落地效果）：

<!DOCTYPE html>

znfrsd commented 6 years ago

35张南回复了下雪效果

<!DOCTYPE html>

| | | | | | | | |

| |

| | | |

chen0704 commented 6 years ago

31 陈汇提示框

<body>
    <div class="container">
        <h1>tooltip提示框</h1>
        <p>tooltip提示框是网页中常见页面<a href="#"class="tooltip"  data-content="积件思维">组件</a>在网页交互中应用广泛，我们利用该案例来演示提示文本的实现。</p>
        <p>本案例利用html+css+javascript实现，html部分实现架构，css实现表现，js主要实现交互。html利用属性来控制效果，表现部分主要在css里实现，行为部分通过js来实现。</p>
        <p>我们可以实现<a href="#" class="tooltip" >上</a>、<a href="#" class="tooltip" data-content="下">下</a>、<a href="#" class="tooltip" data-content="左">左</a>、<a href="#" class="tooltip" data-content="右">右</a>四种效果。</p>
    </div>      
</body>
<script type="text/javascript">
    //获取
    var tips=document.querySelectorAll(".tooltip");
    if(tips.length==0){
        console.log("没有提示");
    }else{
        //初始化
        for(var i=0;i<tips.length;i++){
            var content=document.createElement("span");
            var data=tips[i].hasAttribute("data-content")?tips[i].getAttribute("data-content"):"提示为空";
            content.innerHTML=data;
            tips[i].appendChild(content);
            //监听
            tips[i].addEventListener("mouseover",mouseoverHandler);
            tips[i].addEventListener("mouseout",mouseoutHandler);
        }
    }
    //执行函数
    function mouseoverHandler(){
        var event=event||window.event;
        var target=event.target||event.srcElement;
        var targetSpan=target.getElementsByTagName("span")[0];
        targetSpan.classList.add("show");

    }
    function mouseoutHandler(){
        var event=event||window.event;
        var target=event.target||event.srcElement;
        var targetSpan=target.getElementsByTagName("span")[0];
        targetSpan.classList.remove("show");
    }
</script>

xutaomei commented 6 years ago

47 许桃美今天课程完成的代码如下（表格的添加）：

表格的添加和删除