前端上传文件相关HTML

场景,点选择文件,能在输入框显示所上传的文件名,第一想到的是原生的表单元素,如下:<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script><script>    $(function() {        $("#wenjian").change(function() {            $("#text").val($("#wenjian").val());        });         $("#browser").click(function() {            $("#wenjian").click();        });     });</script><input type="text" id="text" /><input type="file" id="wenjian" class="file" style="display: none;" /><input type='button' class='btn' value='浏览...' id="browser" />原生文件输入框“选择文件”按钮后会显示“未选择任何文件”等的文字,这因浏览器而异。于是只能隐藏而使用额外按钮去调用上传文件按钮,原生上传按钮隐藏,以上为jq版本,下方为js版本。<div class="button operating-button" id="fileUpdate-button">从Excel中批量导入</div><form action="" id ="fileUpdate-form">    <input type="file" name="filename" id="fileUpdate-input" style="display: none" /></form><script type="text/javascript">    //上传文件处理    var fileUpdate_button = document.getElementById("fileUpdate-button");    var fileUpdate_input = document.getElementById("fileUpdate-input");    var fileUpdate_form = document.getElementById("fileUpdate-form");    fileUpdate_button.onclick = function () {        fileUpdate_input.click();    }    fileUpdate_input.onchange = function () {        fileUpdate_form.submit();    }</script>另一种,通过CSS控制,让文件输入框隐藏,但是作用范围变大,即隐藏在文本输入框与按钮下 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>定义input type="file" 的样式</title> <style type="text/css"> body { font-size: 14px; } input { vertical-align: middle; margin: 0; padding: 0 } .file-box { position: relative; width: 340px } .txt { height: 22px; border: 1px solid #cdcdcd; width: 180px; } .btn { background-color: #FFF; border: 1px solid #CDCDCD; height: 24px; width: 70px; } .file { position: absolute; top: 0; right: 80px; height: 24px; filter: alpha(opacity:0); opacity: 0; width: 260px } </style> </head> <body> <div class="file-box"> <form action="" method="post" enctype="multipart/form-data"> <input type='text' name='textfield' id='textfield' class='txt' /> <input type='button' class='btn' value='浏览...' /> <input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" /> <input type="submit" name="submit" class="btn" value="上传" /> </form> </div> </body>

LayUI时间格式时间戳格式化成指定时间字符串

LayUI表格中有数据要进行显示时间,但后台传来的时间为时间戳格式怎么办?很简单,示例如下:{title:"创建时间",field:"cratetime",sort: true,templet: function(res){   return layui.util.toDateString(res.cratetime, 'yyyy-MM-dd HH:mm:ss')}}类似的,如果在angularJS上是这样:{{entity.creatTime|date:'yyyy-MM-dd hh:mm:ss'}}

云签到使用说明与帮助

地址:http://hik.win目前仅支持百度贴吧自动签到。使用方法:    点击页面添加任务按钮添加任务,输入你的QQ作为今后查询修改任务的条件,任务名可自定义,bduss获取方式如下方说明。    提交后系统会在每天特定时间执行签到,你可以通过输入QQ查询你名下的任务,状态有“有效”跟“无效”,如果是“无效”就说明你要重新更新bduss了,可以点击修改键入新的bduss提交给服务器。bduss获取方法:登录百度账号,可以是百度的任意产品,例如百度搜索、贴吧、知道等bduss都一样,登录成功浏览器后按F12,点上头Application再点Cookie,点击Cookie下的百度域名,找到BDUSS字段双击右边长字符串,Ctrl+C复制即可。以下图片是用Chrome浏览器,其他浏览器也可以大同小异。

云签到使用说明与帮助

JavaScript获取浏览器地址栏参数JS

代码如下调用即可function getUrlSearch(name) {    // 未传参,返回空    if (!name) return null;    // 查询参数:先通过search取值,如果取不到就通过hash来取    var after = window.location.search;    after = after.substr(1) || window.location.hash.split('?')[1];    // 地址栏URL没有查询参数,返回空    if (!after) return null;    // 如果查询参数中没有"name",返回空    if (after.indexOf(name) === -1) return null;    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');    // 当地址栏参数存在中文时,需要解码,不然会乱码    var r = decodeURI(after).match(reg);    // 如果url中"name"没有值,返回空    if (!r) return null;    return r[2];}调用示例:var qq = getUrlSearch('qq')

AngularJS入门及示例

AngularJS 诞生于 2009 年,由 Misko Hevery 等人创建,后为 Google 所收购。是一款优 秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心 的是:MVC、模块化、自动化双向数据绑定、依赖注入等等。双向绑定(同变量值同步变化):<html><head><title>入门小 Demo-1</title><script src="angular.min.js"></script></head><!-- ng-init初始化 --><body ng-app ng-init="myname='蔡徐坤'"> <!-- {{}}变量表达式调用 -->{{100+100}}<!-- ng-model变量绑定 双向绑定 即下面同变量名数值都一样 -->请输入你的姓名:<input ng-model="myname">   <input ng-model="myname"><br>{{myname}},你好</body></html>控制器controller与事件:<html> <head> <title>控制器</title> <script src="angular.min.js"></script> <script>  var app = angular.module('myApp', []); //定义了一个名叫 myApp 的模块 []写引入其他模块的名字 //定义控制器 $scope作用域 控制层与视图层的数据桥梁 app.controller('myController', function($scope) { $scope.add = function() { // 获取视图层的变量 转换成int 否则+会作为拼接字符串连接符 return parseInt($scope.x) + parseInt($scope.y); } }); </script> </head> <!-- body绑定模块与控制器 --> <body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x"> y:<input ng-model="y"> 运算结果:{{add()}} </body></html>ng-click事件与ng-repeat循环数组与对象数组:<html> <head> <title>事件指令</title> <script src="angular.min.js"></script> <script> var app = angular.module('myApp', []); //定义了一个叫 myApp 的模块 //定义控制器 app.controller('myController', function($scope) { $scope.add = function() { $scope.z = parseInt($scope.x) + parseInt($scope.y); } $scope.list = [100, 200, 300]; //定义数组 /* 循环对象定义 */ $scope.alist = [{ name: '张三', shuxue: 100 }, { name: '李四', shuxue: 88 }]; //定义数组 }); </script> </head> <body ng-app="myApp" ng-controller="myController"> x:<input ng-model="x"> y:<input ng-model="y"> <!-- ng-click单击事件 --> <button ng-click="add()">计算</button> 结果:{{z}} <!-- 循环数组 ng-repeat = 变量 in 数组 --> <table> <tr ng-repeat="a in list"> <td>{{a}}</td> </tr> </table> <!-- 循环对象 类似Java中用点调用对象属性--> <table> <tr ng-repeat="a in alist"> <td>{{a.name}}</td><td>{{a.shuxue}}</td> </tr> </table> </body></html>$http内置服务:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>内置服务</title> <meta charset="utf-8" /> <script src="angular.min.js"></script> <script> var app = angular.module('myApp', []); //定义了一个叫 myApp 的模块 //内置服务$http需要再方法中注入 app.controller('myController', function($scope, $http) { $scope.findAll = function() { // get/post请求 $http.post('data.json').success( function(response) { $scope.list = response; } ); } //由于body调用了该controller 因此必定会调用下行方法而执行上述代码 但放init中就不必担心别的页面每次调用也会执行  // $scope.findAll(); }); </script> </head> <!-- ng-init除了给变量初始化 也可以调用方法 --> <body ng-app="myApp" ng-controller="myController" ng-init="findAll()"> <table> <tr> <td>姓名</td> <td>数学</td> <td>语文</td> </tr> <tr ng-repeat="entity in list"> <td>{{entity.name}}</td> <td>{{entity.shuxue}}</td> <td>{{entity.yuwen}}</td> </tr> </table> </body></html>测试的json数据data.json:[{"name":"张三","shuxue":100,"yuwen":93},{"name":"李四","shuxue":88,"yuwen":87},{"name":"王五","shuxue":77,"yuwen":56},{"name":"赵六","shuxue":67,"yuwen":86}]总结:var app = angular.module('myApp', []) //在js中定义模块app.controller('myController', function($scope) {}    //给模块创建名为myController的控制器$scope //前端与控制层数据的桥梁ng-app="myApp"  //在body标签里绑定模块 将body交给angular管理ng-init="findAll() //初始化变量或者在载入时调用方法 可见第一个demong-controller="myController" //定义控制器{{}}        //调用变量或者运算式<input ng-model="x">    //为标签绑定变量ng-click        //单击事件a in list        //in作为list遍历a.name        //点调用对象属性$http.post('data.json').success(function(response){return response})    //http服务发送请求MVC模式首先在base.js中创建模块,这里命名为appvar app=angular.module('tieba',['pagination']);    //[]内为引入的模块 不需要可留空在服务js中写service:app.service('tiebaService',function($http){   //读取列表数据绑定到表单中   this.findAll=function(){      return $http.get('../tieba/findAll.do');   }});在控制层js中写controller: //控制层app.controller('tiebaController' ,function($scope,$controller   ,tiebaService){ //引用service跟内置服务   $controller('baseController',{$scope:$scope});//继承 baseController    //读取列表数据绑定到表单中   $scope.findAll=function(){      tiebaService.findAll().success(         function(response){            $scope.list=response;         }      );   } });

AnglarJs选择多选框动态求和

只是一个小练习:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <script src="js/angular.min.js"></script> <script> var app = angular.module('myApp', []); //定义了一个叫 myApp 的模块 //定义控制器 app.controller('myController', function($scope) { $scope.list = [100, 192, 203, 434]; //定义数组 $scope.selectIds=[];//选中的 ID 集合 $scope.getsum=function($event,x){ $scope.sum=0; if($event.target.checked){ $scope.selectIds.push(x); }else{ var idx = $scope.selectIds.indexOf(x);  $scope.selectIds.splice(idx, 1);//删除 } for (var i of $scope.selectIds) { $scope.sum+=i; } }; }); </script> </head> <body ng-app="myApp" ng-controller="myController"> <table> <tr ng-repeat="x in list"> <td>{{x}}<input type="checkbox" ng-click="getsum($event,x)"></td> </tr> </table> 集合:{{selectIds}} 求和:{{sum}} </body></html>前端真难。。

HTML5 Clear源码(vue作者尤雨溪作品)

这是很早以前的代码了,找到来一起分享学习吧。该代码适合手机端。HTML5 Clear增加了以下功能:本地存储更坚固的结构更强大的触摸事件处理更多的功能,只要拖动向上/向下多点触控(WIP)下载地址:链接:https://pan.baidu.com/s/18mcVmayFndhrg6T0dPoUJQ 提取码:j3bk 复制这段内容后打开百度网盘手机App,操作更方便哦

给button加超链接 window.open与window.location.href区别

加超链接很简单,只需要在标签里添加点击事件:onclick="window.open('/admin/goods_edit.html')"或者onclick="window.location.href='/admin/goods_edit.html'"再抑或在外部加个a标签即可。window.open只是打开页面window.location.href打开页面并刷新

表单校验JQuery与正则的使用

简单讲解下正则的使用:单个字符:[]如: a [a-zA-Z0-9_]特殊符号代表特殊含义的单个字符:\d:单个数字字符 [0-9]\w:单个单词字符[a-zA-Z0-9_]量词符号:?:表示出现0次或1次*:表示出现0次或多次+:出现1次或多次{m,n}:表示 m<= 数量 <= n* m如果缺省: {,n}:最多n次* n如果缺省:{m,} 最少m次开始结束符号^:开始$:结束创建var reg = new RegExp("正则表达式");var reg = /正则表达式/;方法. test(参数):验证指定的字符串是否符合正则定义的规范,简单示例:var a="12345";var reg=/^\w{6,12}$/;   //正则 表示字符数6-12var b=reg.test(a); //此处a值不符合返回falsealert(b);下面以注册表单校验为例:<!--导入jquery--><script src="js/jquery-3.3.1.js"></script><script>    /*思路:    * 为每个单元格建立校验    * 在输入框离开焦点跟提交时候启用校验*/    function checkUsername() { //校验用户名        /*获取用户名值        * 定义正则        * 判断是否为true*/        var username = $("#username").val();        var reg_username = /^\w{3,10}$/; //用户名为3-10位字符串        var flag = reg_username.test(username);        if (flag) {            console.log("用户名合法") //浏览器控制台显示日志内容 实际不用写            $("#username").css("border", "");        } else {            console.log("用户名不合法")            $("#username").css("border", "1px solid red");        }        return flag;    }    function checkPassword() {        var password = $("#password").val();        var reg_password = /^\w{6,16}$/; //密码为6-10位字符串        var flag = reg_password.test(password);        if (flag) {            console.log("密码合法")            $("#password").css("border", "");        } else {            console.log("密码不合法")            $("#password").css("border", "1px solid red");        }        return flag;    }    function checkEmail() {        var email = $("#email").val();        var reg_email = /^\w+\@\w+\.\w+$/; //符合特定格式的字符串 带@跟.        var flag = reg_email.test(email);        if (flag) {            console.log("邮箱合法")            $("#email").css("border", "");        } else {            console.log("邮箱不合法")            $("#email").css("border", "1px solid red");        }        return flag;    }    function checkName() {        var name = $("#name").val();        var reg_name = /^\w{3,10}$/;        var flag = reg_name.test(name);        if (flag) {            console.log("姓名合法")            $("#name").css("border", "");        } else {            console.log("姓名不合法")            $("#name").css("border", "1px solid red");        }        return flag;    }    function checkTelephone() {        var telephone = $("#telephone").val();        var reg_telephone = /^\1\d{10}$/; //首位为1后面十位为数字        var flag = reg_telephone.test(telephone);        if (flag) {            console.log("手机合法")            $("#telephone").css("border", "");        } else {            console.log("手机不合法")            $("#telephone").css("border", "1px solid red");        }        return flag;    }    function checkCheck() {        var check = $("#check").val();        var reg_check = /^\w{4}$/; //已知验证码为四位字符        var flag = reg_check.test(check);        if (flag) {            console.log("验证码合法")            $("#check").css("border", "");        } else {            console.log("验证码不合法")            $("#check").css("border", "1px solid red");        }        return flag;    }    $(function () {        /*当表单提交时调用校验方法*/        $("#registerForm").submit(function () {            if (checkName() && checkPassword() && checkName() && checkEmail() && checkTelephone() && checkCheck()) {                $.post("user/regist", $(this).serialize(), function (data) { //serialize()序列化表单内容                    if (data.flag) { //从服务器获取注册结果                        console.log("注册成功")                        location.href = "regist_ok.html"; //注册成功跳转页面                    } else {                        console.log("注册失败")                        $("#errorMsg").html(data.errorMsg); //注册失败显示错误信息                    }                })            }        });        $("#username").blur(checkUsername); //鼠标离开输入框执行事件        $("#password").blur(checkPassword); //注意方法名后不要加(),否则失焦事件将无异议        $("#email").blur(checkEmail);        $("#name").blur(checkName);        $("#telephone").blur(checkTelephone);        $("#check").blur(checkCheck);    })</script>

JQuery中的mouseleave跟mouseout事件区别

使用IDEA写JQ事件时候发现有两种事件都是鼠标离开时触发的,它们分别是mouseleave跟mouseout为此我也上网百度了下得到两点区别:不论鼠标指针离开被选元素还是任何子元素,都会触发 mouseout 事件。只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。也就是说假如一个div1内部又有个div2,你在div1中绑定了mouseout,当你鼠标离开div2时候也会触发事件,而leave不会,因此大家在使用时候建议根据具体情况使用

JQuery中的mouseleave跟mouseout事件区别