个人中心
gpt4 book ai didi

javascript - 如何添加淡入淡出

转载 作者：行者123 更新时间：2023-11-28 02:26:36 25 4
gpt4 key购买 nike

我坚持我的元素。我需要仅使用 javascript 和 css 添加淡入和淡出效果下方的代码。请帮我。我创建了这个函数来将所有数据存储在本地存储中，当我单击保存按钮时，我希望添加的注释具有淡入淡出的效果。当我删除笔记时，我希望它在淡出时被删除。只有我添加或删除的注释会添加或删除效果

这是添加注释的函数:

function saveIt() {   
    var content = document.getElementById("content").value;
    var date = document.getElementById("date").value;
    var time = document.getElementById("time").value;
    var id = Math.floor(Math.random() * 100000);  //creating random id number.

    var note = { id: id, content: content, date: date, time: time };
    notesArray.push(note);

    localStorage.myList = JSON.stringify(notesArray);
    notesNewArray = JSON.parse(localStorage.myList);

    for (var i = 0; i < notesNewArray.length; i++) {
         theId = notesArray[i].id; 
        var output = "<div id='justFade'>" + "<div class='main col-xm-12 col-sm-6 col-md-4 col-lg-3'>" + "<div class='note-bg'>" + "<div id='" + theId + "'" + "onclick='deleteNote(this.id)'>" + "<p id='hide-delete' class='glyphicon glyphicon-remove-circle'></p>" + "</div>" + "<div class='noteContent'>" + notesNewArray[i].content + "</div>" + "<div class='noteDate'>" + notesNewArray[i].date + "</div>" + "<div>" + notesNewArray[i].time + "</div>" + "</div>" + "</div>" + "</div>";        
    }

    document.getElementById("results").innerHTML += output;
    
    
    document.getElementById("msg").innerHTML = ""; //to hide the message for the empty note. 
    document.getElementById("msgDate").innerHTML = "";   //to hide the message for the empty or wrong date. 
    document.getElementById("msgTime").innerHTML = "";   //to hide the message for the empty or wrong date.  
    document.forms['myNotes'].reset(); //reseting the form on saving.
    
    
    function deleteNote(clickedId) {
    var myList = localStorage.myList;
    notesArray = JSON.parse(myList);
    for (var i = 0; i < notesArray.length; i++) {
        if (notesArray[i].id == clickedId) {
            notesArray.splice(i, 1); // searching for the same ID number that the user clicked on and deleting it.
        }
        localStorage.myList = JSON.stringify(notesArray);
        notesNewArray = JSON.parse(localStorage.myList);        

        document.getElementById("results").innerHTML = "";
        getIt(); // calling again to the notes from the local storage.     
    }
}
<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Project</title>
        
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/styles.css">
        <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
        

        

    </head>
     <body id="init">

         <div class="center">
            <img src="img/title.png"  class="img-center" alt="My Task Board" width="876" height="225">          
        </div>

         <div class="container-fluid">             
             <div class="row">
                 <div class="col-sm-4"></div>
                 <div class="col-sm-4">
                    <form id="myNotes" name="myNotes">
                        <div class="form-group">
                             <textarea rows="8" name="myContent" cols="100" class="form-control" id="content" placeholder="type your note here..." required></textarea><br>                            
                             <div><input type="date" class="form-control" id="date" required></div>
                             <div><input type="time" class="form-control" id="time" required></div>
                             <input type="submit" class="btn btn-primary" id="save" value="save">
                             <div id="msg"></div>
                            <div id="msgDate"></div>
                            <div id="msgTime"></div>
                        </div>                                      
                    </form>
                 </div>                    
                 <div class="col-sm-4"></div>
             </div>
         </div>
        <div id="results" class="singleNote"></div>
        <script src="js/myscript.js"></script>
    </body>
</html>

谢谢。

最佳答案

你可以使用jquery来解决这个问题。对于需要淡入或淡出的任何元素，您可以这样做...

$("#div1").fadeIn();
$("#div1").fadeOut();

这是一个解释...的链接 Jquery fade in and out

关于javascript - 如何添加淡入淡出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47930583/

25 4 0
文章推荐： html - 如何在不添加滚动条的情况下使图像部分落在屏幕上
文章推荐： Javascript 在 Firefox 中加载不正确
文章推荐： php - jquery ajax调用mysql
文章推荐： javascript - 如何避免使用 react 在/页面中执行主脚本？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com