发表于: 2021-04-27 21:38:58

1 1840


今天完成的事情:知识巩固,jQuery框架了解,后续使用;


明天计划的事情:任务三翻牌查看身份和隐藏身份。


遇到的问题:困扰很久的问题得到解决,当前页面种种要求符合条件,跳转下一个页面的问题。


收获:


jQuery框架:

通过使用 HTML 的 <script> 标签引用框架;

jQuery 框架是一个 JavaScript 函数库。jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库。

jQuery 库包含以下功能:HTML 元素选取;HTML 元素操作;CSS 操作;HTML 事件函数;JavaScript 特效和动画;HTML DOM 遍历和修改;AJAX;Utilities

除此之外,jQuery 还提供了大量的插件。

jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作;

基础语法: $(selector).action():美元符号定义 jQuery;选择符(selector)"查询"和"查找" HTML 元素;jQuery 的 action() 执行对元素的操作。

$(this).hide() - 隐藏当前元素;$("p").hide() - 隐藏所有 <p> 元素;$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素;$("#test").hide() - 隐藏 id="test" 的元素

所有 jQuery 函数位于一个 document ready 函数中:$(document).ready(function(){   // 开始写 jQuery 代码... });

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数,操作可能失败。



页面的种种要求符合,才可以跳转页面;

需要满足的条件:

1,玩家总人数与滑动按钮同步,实现同时操控人数的增或减;

2,总玩家数等于各角色人数总和,实现同步一起增或减;

3,检查输入的人数是否符合要求;

4,检查是否输入词汇;

当上面要求都达标才可以往下页页面跳转,否则弹窗提醒;

//检测输入人数和分配角色人数总和是否相同
function number() {
    var a = parseInt(btm.value);
    var b = parseInt(killer.innerHTML);
    var c = parseInt(orlm.innerHTML);
    if (a == b + c) {
        return true;//当各角色总和等于输入人数时输出正确
    }
}

//检测是否输入词组
function isnull(val) {                 //测试函数,检测元素框内容是否等于空值,若等于空值,为错误,反之为正确
    var str = val.value.trim();
    if (str == '' || str == undefined || str == null) {
        return false;
    }
    else {
        return true;
    }
}

//跳转页面命令
footerTop.onclick = function () {//检查是否人数输入正确以及词汇是否输入
    number();//此函数为各角色总和是否等于输入人数
    var num = number();
    isnull(iptSm);//测试函数,来测试自己的词汇输入框
    isnull(iptSs);
    var sm = isnull(iptSm);
    var ss = isnull(iptSs);
    if (btm.value >= 4 && btm.value <= 18 && num == true && sm == true && ss == true) {//符合条件跳转下个页面
        window.location.href = 'js/task3/task-1.html';
    }
    else if (sm != true && ss != true) {
        alert("请输入词汇")//当词汇输入框未输入词汇时弹窗提醒
    }
    else {
        alert("请输入正确的玩家人数")//当人数输入错误时弹窗提醒
    }
}


返回列表 返回列表
评论

    分享到