JavaScript全局修改代码修饰器CSS 网站添加prettify代码高亮教程

 不同主题高亮不统一问题本站由于之前曾用不同编辑器插件编辑文章,因此代码高亮区域的CSS都点不同,不同主题之间对<pre>标签的处理也都不一样,造成每个主题都有不同的代码高亮形式。之前我的解决方法是改插件的CSS实现CSS内容统一,但这样面临两个问题:操作麻烦 需要手动修改CSS源文件破坏插件CSS 当插件更新时会修改可能会被覆盖恢复    感叹之前想得太麻烦,其实很简单解决这个问题,首先引入相关js、css代码(没有可在商店下载):<link rel="stylesheet" type="text/css" href="/zb_users/plugin/FY_Prettify/prettify.css" />     <script src="/zb_users/plugin/FY_Prettify/prettify.js"></script>然后通过js遍历标签节点强制更改pre标签为指定样式:    <script type="application/javascript"> var tags= document.getElementsByTagName("pre"); for (let s of tags) { s.setAttribute("class","fy-prettyprint linenums"); } </script>最后将这段代码放在主题设置的统计代码中即可,即以下:代码高亮代码<link rel="stylesheet" type="text/css" href="/zb_users/plugin/FY_Prettify/prettify.css" />     <script src="/zb_users/plugin/FY_Prettify/prettify.js"></script><script type="application/JavaScript"> var tags= document.getElementsByTagName("pre"); for (let s of tags) { s.setAttribute("class","fy-prettyprint linenums"); } prettyPrint();</script>其中本站已在prettify.js中调用了prettyPrint()方法,因此可以删除prettyPrint()避免重复调用。但是鄙人发现调用后还是没效果,发现可能是jq版本造成的错误,原错误代码:/*初始化prettyPrint*/jQuery(window).load(function(){    jQuery("pre").addClass("prettyprint");     prettyPrint();})改成下列即可/*初始化prettyPrint*/$(window).on('load',function(){    jQuery("pre").addClass("prettyprint");     prettyPrint();})代码复制功能代码复制引用相关js即可。Z-Blog用户可在应用商店搜索“复制代码”<script src="/zb_users/plugin/copycode/clipboard.min.js"></script><script src="/zb_users/plugin/copycode/copycode.js" type="text/javascript" /></script>将如下代码放在网站任意共通页面中即可。文章页面编辑功能给每篇文章页面添加编辑功能,很简单,在文章显示页的PHP主题模板文件中添加:<span>{if $user.ID>0}<i class="fi fi-edit"></i><a href="{$host}zb_system/cmd.php?act=ArticleEdt&id={$article.ID}" rel="nofollow">Edit &nbsp;</a>{/if}</span>当然最简单是将上述封装成js文件直接引用就行,可以省去修改PHP模板的困扰,也减少代码侵入:var tags = document.getElementsByTagName("pre");for (let s of tags) { s.setAttribute("class", "fy-prettyprint linenums");}function getCookie(cookieName) { var cookieValue = ""; if (document.cookie && document.cookie != '') { var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { var cookie = cookies[i]; if (cookie.substring(0, cookieName.length + 2).trim() == cookieName.trim() + "=") { cookieValue = cookie.substring(cookieName.length + 2, cookie.length); break; } } } return cookieValue;}if (getCookie('username')) { var pathName = window.location.pathname; if (pathName.indexOf('post/') > -1) { var endNum = pathName.length - 5; var articleNo = pathName.substring(6, endNum); if (!$('.article-info .fr .edits').html()) { var editStr = '<span><i class="fi fi-edit"></i> <a href="/zb_system/cmd.php?act=ArticleEdt&id='+articleNo+'"rel="nofollow">Edit &nbsp;</a></span> '; $('.article-info .fr').prepend(editStr); } }}以上代码思路也很简单,判断当前cookie中是否有用户名字段,有就在页面指定位置添加编辑按钮,这里编辑按钮的articleNo是根据当前页面Url来的,你的页面伪静态策略可能不一样,因此根据实际需求修改吧,关于编辑框插入位置的css选择器也根据实际情况进行修改即可。

LayUI获取下拉框选择的值

前台渲染下拉框例如:$("select[name='sex']").empty();var optionD = '<option value = "">请选择...</option>';optionD += '<option value = "1">男</option>';optionD += '<option value = "0">女</option>';$("select[name='sex']").append(optionD);layui.form.render("select");HTML内容(以下是渲染后的内容)<div class="layui-inline">  <label class="layui-form-label">性别:</label>  <div class="layui-input-inline">    <select name="sex" lay-filter="sex" class="selectop">      <option value="">        请选择...      </option>      <option value="0">        男      </option>      <option value="1">        女      </option>    </select>    <div class="layui-unselect layui-form-select layui-form-selected">      <div class="layui-select-title">        <input type="text" placeholder="请选择..." value="" readonly="readonly" class="layui-input layui-unselect" /><i class="layui-edge"></i>      </div>      <dl class="layui-anim layui-anim-upbit" style="">        <dd lay-value="" class="layui-select-tips layui-this" style="">请选择...</dd>        <dd lay-value="0" class="">男</dd>        <dd lay-value="1" class="">女</dd>      </dl>    </div>  </div></div>获取下拉框所选值sex = $("select[name='sex'] option:selected").val(),// 获取下拉框值也可以使用form监控获取值    //    获取select下拉框的值    form.on('select(sex)', function (data) {        sex= data.value;        params.sex = sex;    })封装查询的实体function getSearchParam() {    var params = {};    var matkl = $("input[name='name']").val(),        labor = $("select[name='sex'] option:selected").val();// 获取下拉框值      if (name) {        params.name = name;    }    if (sex) {        params.sex = sex;    }    return params;}好处:第一种简单,需要在下拉框点击查询的时候才获取下拉框值;第二种用form.on监控select组件,只要选择值变动即能获取下拉框值。

前端上传文件相关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打开页面并刷新