[JavaScript] 常用JS脚本

简介: [JavaScript] 常用JS脚本

简介

方法 / 步骤

🚀获取cookie

  • 获取cookie指令
javascript:(function(){let domain=document.domain;let cookie=document.cookie;prompt('Cookies: '+domain, cookie)})();
  • 一键获取cookie到粘贴板
javascript:(function(){var oInput=document.createElement('input');oInput.value=document.cookie;document.body.appendChild(oInput);oInput.select();document.execCommand("Copy");oInput.className='oInput';oInput.style.display='none';alert('复制成功');})()

🚀知乎一键邀请

打开F12,打开控制台Console,输入以下代码即可一键邀请

document.querySelectorAll(".Button.Button--blue").forEach((v)=>v.click());

🚀 网页Footer页脚嵌入

Footer位置JS写法一

绑定动态ID:footer
    var now = new Date();
    var currentYear = now.getFullYear();
    $("#footer").html('<p>&copy; 2015-'+currentYear+' Cheney. All rights reserved | Design by <a href="http://www.baidu.com" target="_blank">Cheney</a></p>');

Footer位置JS写法二

footer.html 里面写入:
<script>
    var now = new Date();
    var currentYear = now.getFullYear();
    $("#footer").html('<footer class="main-footer"><strong>Copyright &copy; 2015-'+currentYear+' <a href="http://baidu.com">baidu.com</a>.<a> All rights reserved.</a></strong>');
</script>
主页面添加标签
   <!--footer-->  
    <div class="footerpage" id="footer"></div>
    
    
<script>

    $(function(){
        $(".footerpage").load("footer.html");
    });
    
</script>

验证码校验JSP 记录

login.jsp

<!-- 显示提示信息 -->
<div class="alert alert-warning alert-dismissible" role="alert" id="errMsgContiner">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    div id="showErrMsg"></div>
</div>
<h4 class="header blue lighter bigger">
    <i class="ace-icon fa fa-coffee green"></i> 用户登录
</h4>

<label class="block clearfix">
    <span class="block input-icon input-icon-right">
        <input type="text"  name="userName" iscookie="true" class="form-control" placeholder="请输入用户名"  id="userName" value="admin"/>
        <i class="ace-icon fa fa-user"></i>
    </span>
</label>
<label class="block clearfix">
    <span class="block input-icon input-icon-right">
        <input type="password" name="password" class="form-control" placeholder="请输入密码" id="password" value="123456"/>
        <i class="ace-icon fa fa-lock"></i>
    </span>
</label>

<label class="block clearfix">
    <div class="input-group">
        <input type="text" style="width:150px" name="randCode" class="form-control" placeholder="请输入验证码"  id="randCode"/>
        <span class="input-group-addon" style="padding: 0px;"><img id="randCodeImage" src="randCodeImage"  /></span>
    </div>
</label>

login.js

//重新加载验证码
function reloadRandCodeImage() {
        var date = new Date();
        var img = document.getElementById("randCodeImage");
        img.src='randCodeImage?a=' + date.getTime();
    }
    
    
    //设置cookie
  function setCookie()
  {
    // 记住登录用户名---
      if ($('#on_off').attr("checked")) {
          $("input[iscookie='true']").each(function() {
              $.cookie(this.name, $("#"+this.name).val(), "/",24);
              $.cookie("COOKIE_NAME","true", "/",24);
          });
      } else {
          $("input[iscookie='true']").each(function() {
              $.cookie(this.name,null);
              $.cookie("COOKIE_NAME",null);
          });
      }
  }
  //读取cookie
  function getCookie()
  {
      var COOKIE_NAME=$.cookie("COOKIE_NAME");
      if (COOKIE_NAME !=null) {
          $("input[iscookie='true']").each(function() {
              $($("#"+this.name).val( $.cookie(this.name)));
              if("admin" == $.cookie(this.name)) {
                  $("#randCode").focus();
              } else {
                  $("#password").val("");
                  $("#password").focus();
              }
          });
          $("#on_off").attr("checked", true);
          $("#on_off").val("1");
      } 
      else
      {
          $("#on_off").attr("checked", false);
          $("#on_off").val("0");
        $("#randCode").focus();
      }
  }
  
  
  //错误信息显示
  function optErrMsg(){
        $("#showErrMsg").html('');
        $("#errMsgContiner").hide();
    }
    
    
//登录处理函数
  function newLogin(orgId) {
    setCookie();
    var actionurl="loginController.do?login";//提交路径
    var checkurl="loginController.do?checkuser";//验证路径
    var formData = new Object();
    var data=$(":input").each(function() {
      formData[this.name] =$("#"+this.name ).val();
    });
    formData['orgId'] = orgId ? orgId : "";
    //语言
    formData['langCode']=$("#langCode").val();
    formData['langCode'] = $("#langCode option:selected").val();
    $.ajax({
      async : false,
      cache : false,
      type : 'POST',
      url : checkurl,// 请求的action路径
      data : formData,
      error : function() {// 请求失败处理函数
      },
      success : function(data) {
        var d = $.parseJSON(data);
        if (d.success) {
          if (d.attributes.orgNum > 1) {
                //用户拥有多个部门,需选择部门进行登录
              var title, okButton;
              if($("#langCode").val() == 'en') {
                title = "Please select Org";
                okButton = "Ok";
              } else {
                title = "请选择组织机构";
                okButton = "确定";
              }
            $.dialog({
              id: 'LHG1976D',
              title: title,
              max: false,
              min: false,
              drag: false,
              resize: false,
              content: 'url:userController.do?userOrgSelect&userId=' + d.attributes.user.id,
              lock:true,
              button : [ {
                name : okButton,
                focus : true,
                callback : function() {
                  iframe = this.iframe.contentWindow;
                  var orgId = $('#orgId', iframe.document).val();
                  //----------------------------------------------------
                  //变更采用ajax方式提高效率
                  formData['orgId'] = orgId ? orgId : "";
                  $.ajax({
                      async : false,
                      cache : false,
                      type : 'POST',
                      url : 'loginController.do?changeDefaultOrg',// 请求的action路径
                      data : formData,
                      error : function() {// 请求失败处理函数
                      },
                      success : function(data) {
                          window.location.href = actionurl;
                      }
                  });
                  //----------------------------------------------------
                  this.close();
                  return false;
                }
              }],
              close: function(){
                setTimeout("window.location.href='"+actionurl+"'", 10);
              }
            });
          } else {
            window.location.href = actionurl;
          }
       } else {
            showErrorMsg(d.msg);
              if(d.msg === "用户名或密码错误" || d.msg === "验证码错误")
                  reloadRandCodeImage();
        }
      }
    });
  }    
  
  //登录提示消息显示
  function showErrorMsg(msg){    
    $("#errMsgContiner").show();
    $("#showErrMsg").html(msg);    
    window.setTimeout(optErrMsg,3000); 
  }
  
  //表单验证
  function validForm(){
    if($.trim($("#userName").val()).length==0){
      showErrorMsg("请输入用户名");
      return false;
    }

    if($.trim($("#password").val()).length==0){
      showErrorMsg("请输入密码");
      return false;
    }

    if($.trim($("#randCode").val()).length==0){
      showErrorMsg("请输入验证码");
      return false;
    }
    return true;
  }

参考资料 & 致谢

目录
相关文章
|
18天前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
5天前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API
使用JavaScript和Node.js构建简单的RESTful API
|
1月前
|
人工智能 JavaScript 前端开发
使用Node.js模拟执行JavaScript
使用Node.js模拟执行JavaScript
|
1月前
|
消息中间件 JavaScript 前端开发
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
45 1
|
1月前
|
JavaScript 前端开发
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
电话号码正则表达式 代码 javascript+html,JS正则表达式判断11位手机号码
104 1
|
1月前
|
Web App开发 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
|
1月前
|
JSON JavaScript 前端开发
使用JavaScript和Node.js构建简单的RESTful API服务器
【10月更文挑战第12天】使用JavaScript和Node.js构建简单的RESTful API服务器
17 0
|
1月前
|
移动开发 JavaScript 前端开发
【JavaScript】JS执行机制--同步与异步
【JavaScript】JS执行机制--同步与异步
21 0
|
1月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
自然语言处理 JavaScript 前端开发
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)
152 0
学习javaScript必知必会(2)~js词法分析、介绍一下主流的浏览器的开发者工具(js调试和查看网络请求)