前端练习

最新推荐文章于 2024-02-21 18:02:20 发布

vieber

最新推荐文章于 2024-02-21 18:02:20 发布

阅读量851

点赞数

分类专栏： js 文章标签：前端

本文链接：https://blog.csdn.net/sufubo/article/details/50564047

版权

js 专栏收录该内容

79 篇文章 0 订阅

订阅专栏

在页面中，有一个单行输入框，一个按钮，输入框中用来输入用户的兴趣爱好，允许用户用半角逗号来作为不同爱好的分隔。
当点击按钮时，把用户输入的兴趣爱好，按照上面所说的分隔符分开后保存到一个数组，过滤掉空的、重复的爱好，在按钮下方创建一个段落显示处理后的爱好。

<input class='input'>
    <button id="save">保存显示</button>
    <p id="show"></p>
    <script >
        var save = document.getElementById("save");
        save.onclick = function  () {
            var input = document.querySelector('.input');
            var value = input.value+"";
            if(value.split(',')){
                var arr = value.split(',')
                var newArr = new Array();
                for(var i=0;i<arr.length;i++){
                    if(newArr.indexOf(arr[i]) === -1){
                        if(arr[i] !== ""){
                            newArr.push(arr[i]);
                        }
                    }
                }
            }
            var show = document.getElementById("show");
            show.innerText = newArr.toString();

        }
    </script>

创建结点

    document.createElement()方法可以创建元素，但是只接受一个参数，即要创建元素的标签名
        var div = document.createElement("div");
        div.id="nyNewDiv";
        div.className = "box";
        document.body.appendChild(div);
        在ie及更早版本中可以这样,其他浏览器都不支持这样
        var div = document.createElement("<div id=\"myNewDiv\" class=\"box\"></div>");
        创建文本节点
        var textNode = document.createTextNode("hello workd");//只是文本，不会被解析为html文本的
        也可以直接用innerHTML和innerText

这里我把下个练习的思路一说

<!-- 在和上一任务同一目录下面创建一个`task0002_2.html`文件，在`js`目录中创建`task0002_2.js`，并在其中编码，实现一个倒计时功能。

- 界面首先有一个文本输入框，允许按照特定的格式`YYYY-MM-DD`输入年月日；
- 输入框旁有一个按钮，点击按钮后，计算当前距离输入的日期的00:00:00有多少时间差
- 在页面中显示，距离YYYY年MM月DD日还有XX天XX小时XX分XX秒
- 每一秒钟更新倒计时上显示的数
- 如果时差为0，则倒计时停止 -->
 <input class="input">
 <button class="cal">计算距离输入的日期</button>
 <p class="show"></p>
 <script >
var input = document.querySelector(".input");
var cal = document.querySelector(".cal");
var show = document.querySelector(".show");
//获取到输入的值，用正则表达式进行验证，然后进行分隔，把每个值都算出来
//然后计算获取当前的时间年然后相减，然后把计算结果不为0放入数组，然后显示的时候用join（“-”）返回的就是字符串，方法把数组连起来显示

我的domready这样的话比那个window.onload快

function myReady(fn){

    //对于现代浏览器，对DOMContentLoaded事件的处理采用标准的事件绑定方式
    if ( document.addEventListener ) {
        document.addEventListener("DOMContentLoaded", fn, false);
    } else {
        IEContentLoaded(fn);
    }

    //IE模拟DOMContentLoaded
    function IEContentLoaded (fn) {
        var d = window.document;
        var done = false;

        //只执行一次用户的回调函数init()
        var init = function () {
            if (!done) {
                done = true;
                fn();
            }
        };

        (function () {
            try {
                // DOM树未创建完之前调用doScroll会抛出错误
                d.documentElement.doScroll('left');
            } catch (e) {
                //延迟再试一次~
                setTimeout(arguments.callee, 50);
                return;
            }
            // 没有错误就表示DOM树创建完毕，然后立马执行用户回调
            init();
        })();

        //监听document的加载状态
        d.onreadystatechange = function() {
            // 如果用户是在domReady之后绑定的函数，就立马执行
            if (d.readyState == 'complete') {
                d.onreadystatechange = null;
                init();
            }
        }
    }
}

轮播图的制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <!-- css代码书写顺序
    1.位置属性(position, top, right, z-index, display, float等)
    2.大小(width, height, padding, margin)
    3.文字系列(font, line-height, letter-spacing, color- text-align等)
    4.背景(background, border等)
    5.其他(animation, transition等) -->
    <style> 
        *{
            margin:0;
            padding:0;
            text-decoration: none;  
        }
        .body{
            position:relative;
            width:600px;
            height:400px;
            overflow: hidden;
        }
        .content{
            position:absolute;
            z-index: 1;
            width:3000px;
            height:400px;
        }
        .content img{
            float: left;
            width:600px;
            height:400px;
        }
        .button{
            position:absolute;
            width:100px;
            height:10px;
            z-index: 2;
            bottom: 20px;
            left:250px;
        }
        .button span{
            cursor: pointer;
            float:left;
            width:10px;
            height:10px;
            margin-left: 5px;
            border:1px solid #fff;
            border-radius: 50%;
            background:#333333;
        }
        .button .on{
            background:#ff4500;
        }
        .arrow{
            position: absolute;
            z-index: 2; 
            top: 180px; 
            display: none;  
            width: 40px;
            height: 40px; 
            color: #fff;
            line-height: 39px;
            text-align: center;
            font-size: 36px;
            font-weight: bold;
            background-color: RGBA(0,0,0,.3);
            cursor: pointer;        
        }
        .arrow:hover{
            background-color:RGBA(0,0,0,.7);
        }
        #con:hover .arrow{
            display:block;
        }
        #prev{
            left:20px;
        }
        #next{
            right:20px;
        }
    </style>

</head>
<body>
<div class="body" id="con">
    <div class="content" id="content" style="left:0">
        <img src="img/1.jpg">
        <img src="img/2.jpg">
        <img src="img/3.jpg">
        <img src="img/4.jpg">
        <img src="img/5.jpg">
    </div>
    <div class="button" id="button">
        <span index="0" class="on"></span>
        <span index="1"></span>
        <span index="2" ></span>
        <span index="3" ></span>
        <span index="4" ></span>
    </div>
    <a  id="prev" class="arrow">&lt;</a>
    <a  id="next" class="arrow">&gt;</a>
</div>
<button id="change">换下一张图片</button>
    <script >
        window.onload = function() {
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var content = document.getElementById("content");
            var span = document.getElementById("button").getElementsByTagName('span');
            var index = 0;//确定目前到底是在轮播哪个图片，把他作为一个全局变量

            function animate(offset){
                var move = parseInt(content.style.left)+ offset;
                if(move > 0){
                    content.style.left = -2400 +'px';
                }else if(move < -2400){
                    content.style.left = 0 +'px';
                }else{
                    content.style.left = move +'px';
                }
                addOn();
            }

            function addOn(){
                for(var i=0;i<span.length;i++){
                        if(span[i].className === "on"){
                            span[i].className="";
                            break;
                        }
                    }
                span[index].className= "on";
            }

            prev.onclick=function(){
                index -= 1;
                if(index ===-1){
                    index = 4;
                }
                animate(600);
            }
            next.onclick=function(){
                index = index+1;
                if(index === 5){
                    index = 0 ;
                }   
                console.log(index);
                animate(-600);

            }
            var change = document.getElementById("change");
            change.onclick=function(){
                next.onclick();
            }
        }
        //那种竖直方向上的移动就不用display：none了直接全部显示，把旁边的按钮设置为fix定位的，然后根据显示哪个图片亮哪个，这时要用到的技术是页面内定位的方式，每个按钮对应图片的链接，点击按钮就会到哪个页面
类似于这种代码
a标签里面的链接还可以写成这种
 <li><a href="#item1" class="current">1F 男装</a></li>
 <div id="item1" class="item">
    </script>
</body>
</html>