JavaScript 代码分析及注释 - 图片切换、文本计数和提交功能
// 定义变量并赋值 var seat = 1; // 座位号,默认为1 var maxarea = parseInt($("#maxarea").val()); // 最大面积,从id为"maxarea"的元素中获取值并转换为整数
// 定义函数nextimg() function nextimg() { var newseat = seat % 3 + 1; // 计算新的座位号,取余运算符保证座位号在1-3之间循环 /$.post("/UserInfoServlet", { State:"check", seat: seat + move}, function (Data) { if (Data == "true") { $("#image").attr("src").replace("\d+", seat); seat += move; }else { window.alert("没有这个图片!"); } })/ var newurl = $("#image").attr("src").replace(/\d+/, newseat); // 根据新的座位号替换图片的URL $("#image").attr({ src: newurl }); // 更新图片的src属性 seat = newseat; // 更新座位号为新的座位号 }
// 定义常量 const maxlength = 50; // 最大长度为50
// 定义变量并赋值 var foretext = ""; // 前一个文本内容为空字符串 var orecolor = $("#echotext").css("color"); // 获取id为"echotext"的元素的color属性值
// 定义函数count() function count() { var nowtext = $("#introduction").val(); // 获取id为"introduction"的元素的值
if (nowtext.length > maxlength) { // 如果当前文本长度超过最大长度
$("#introduction").val(foretext); // 将当前文本设置为前一个文本值
} else {
$("#echotext").text("已输入" + nowtext.length + "/" + maxlength.toString() + "字"); // 在id为"echotext"的元素中显示当前文本长度和最大长度
foretext = nowtext; // 更新前一个文本值为当前文本值
}
if (foretext.length > 0.8 * maxlength) { // 如果前一个文本长度超过最大长度的80%
$("#echotext").css("color", "red"); // 将id为"echotext"的元素的颜色设置为红色
} else {
$("#echotext").css("color", orecolor); // 将id为"echotext"的元素的颜色设置为原来的颜色
}
}
// 定义常量 const msecond = 10000; // 毫秒数为10000
// 定义函数bodyload() function bodyload() { for (var i = 1; i < msecond; ++i) { // 循环msecond次 setTimeout(function () { $('transparency').css("opacity", i / msecond) // 每隔1毫秒设置id为"transparency"的元素的透明度为i/msecond }, 1); } }
// 定义函数submit() function submit() { var name = $("#name").val(); // 获取id为"name"的元素的值 $.post('/UserInfoServlet?State=update', { // 发送POST请求到"/UserInfoServlet?State=update",传递参数name、imageId、introduction name: name, imageId: seat, introduction: foretext, }, function (Data) { // 请求完成后的回调函数 if (Data == 'true') { // 如果返回的Data为'true' alert("提交成功!"); // 弹出"提交成功!"的提示框 } else { alert("提交失败!"); // 弹出"提交失败!"的提示框 } }) }
原文地址: https://www.cveoy.top/t/topic/pIyR 著作权归作者所有。请勿转载和采集!