js修改功能和获取验证码的定时器功能和select

小王没脑袋

已于 2023-04-02 08:31:23 修改

阅读量92

点赞数

分类专栏：增删改查文章标签： javascript 前端 ajax

于 2023-04-02 08:31:02 首次发布

本文链接：https://blog.csdn.net/wzy0507/article/details/129903836

版权

增删改查专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习总结

继续完善了上次的页面修改的内容思路如下
1，为所有的修改按钮绑定函数传值为this
2，点击此按钮时候会将原有的值赋给输入框同时因为接口用的是_id
所以我需要获取储存的隐藏的盒子在这个点击方法中赋值给确认修改的按钮下隐藏的盒子内容
3点击确认按钮时候将方法调用同时传输入框内容和_id值
代码如下

var changefoodagin = document.getElementById("changefoodagin");
var rightchangefoodagin = document.getElementById("rightchangefoodagin");
// 获取输入框内容
var lookFoodID = document.getElementById("lookFoodID");
var searchFoodmoney = document.getElementById("searchFoodmoney");
var searchFoodphone = document.getElementById("searchFoodphone");
var searchFoodnowtime = document.getElementById("searchFoodnowtime");
var hiddenFood=document.getElementById("hiddenFood");
// 修改食物留下的问题
function changefoodNew(food) {
    foodBoxShadow.style.display = "";
   //为输入框赋值
    lookFoodID.value = food.parentElement.parentElement.children[0].innerHTML;
    searchFoodmoney.value = food.parentElement.parentElement.children[1].innerHTML;
    searchFoodphone.value = food.parentElement.parentElement.children[2].innerHTML;
    searchFoodnowtime.value = food.parentElement.parentElement.children[3].innerHTML;
    console.log(food.parentElement.nextElementSibling);
    //将内容赋值给新的盒子
 hiddenFood.innerHTML=JSON.parse(food.parentElement.nextElementSibling.innerHTML)._id;

}

var changefoodagin = document.getElementById("changefoodagin");

changefoodagin.onclick = function () {
    foodBoxShadow.style.display = "none";
    //调用方法
    changeFoodAll(lookFoodID.value, searchFoodmoney.value, searchFoodphone.value, searchFoodnowtime.value,hiddenFood.innerHTML);
}
var rightchangefoodagin = document.getElementById("rightchangefoodagin");
rightchangefoodagin.onclick = function () {
    foodBoxShadow.style.display = "none";
}

// 修改食物接口
function changeFoodAll(foodname, foodprice, fooddes, foodtype,foodid) {
    $.ajax({
        type: "POST",
        url: "http://118.195.129.130:3000/food/update",
        data: {
            name: foodname,
            price: foodprice,
            desc: fooddes,
            typename: foodtype,
            _id:foodid
        },
        success: function (result) {
            console.log("---------");
            console.log(result);
            getData(foodPageNum.innerHTML, perPage);
        },
        error: function (err) {
            console.log(err)
        }
    })
}

HTML代码如下

div class="foodBoxShadow" id="foodBoxShadow" style="display: none">
        <div class="findfoodHidden" id="" >
            <p style="font-size:18px;">修改食物信息</p></br>
            <span class="spaName">名称</span>
            <input type="text" placeholder="请输入食物名称" id="lookFoodID" autocomplete="off"
            class="changeFoodwords">
            <span class="spaName">金额</span>
            <input type="number" placeholder="请输入食物金额" id="searchFoodmoney" autocomplete="off">
            <span class="spaName">描述</span>
            <input type="text" placeholder="请输入食物描述" id="searchFoodphone" autocomplete="off">
            <span class="spaName">种类</span>
            <input type="text" placeholder="请输入食物种类" id="searchFoodnowtime" autocomplete="off">
            <div id="hiddenFood" style="display: none;"></div>
            <div class="addfoodaginbox">
                <button id="changefoodagin">确认修改</button>
                <button id="rightchangefoodagin">取消修改</button>
            </div>

        </div>
    </div>

发送验证码的定时器

var time=60;
// 倒计时全局变量
var getRecive=document.getElementById("getRecive");
getRecive.addEventListener('click',function(){
    if(!email.test(addorderEmail.value)){
        alert("请输入正确的邮箱");
    }else{
        getRecive.disabled=true;
        var restTime=setInterval(function(){
            if(time==0){
                clearInterval(restTime);
                // 清除定时器
                getRecive.disabled=false;
                // 启用按钮
                time=60;
                getRecive.innerHTML="获取";
            }
            else{
                getRecive.innerHTML="剩余"+time+"秒";
                time--;
            }
        },1000)
    
    }

select

var foodIndex = foodpageChange.selectedIndex;
// 获取索引
var perPage = foodpageChange.options[foodIndex].value;
// 获取里面的值
function changeperpage() {
    foodIndex = foodpageChange.selectedIndex;
    perPage = foodpageChange.options[foodIndex].value;
    // 重新获取select的值进行切换 重新赋值
    getData(foodPageNum.innerText, perPage)
}