HTML编程技巧-达达
1 解决滚动条影响布局
html {
width:100vw;
overflow-x:hidden;
overflow-y:hidden;
}
2 百度富文本编辑器
①js代码引入
<script type="text/javascript" charset="utf-8" src="../umeditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="../umeditor/ueditor.all.min.js"> </script>
②html代码引入
<script id="editor" name="content-main" type="text/plain">
<!--初始化内容-->
{!! $teacher->content !!}
</script>
③JS控制
//实例化编辑器
//建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
var ue = UE.getEditor('editor');
3、鼠标划过一段文字，显示文字
$(document).ready(function () {
$(".sents").mouseup(function (e) {
var txt;
var parentOffset = $(this).offset();
var x = e.pageX - parentOffset.left;
var y = e.pageY - parentOffset.top;
txt = window.getSelection();
if (txt.toString().length >= 1) {
alert(txt);
}
});
});
4、查询当前标签是第几个标签
$(".sents>span").on("click",function(){
var index = $(".sents>span").index(this);
alert(index);
})
image.png
5、延时执行
setTimeout(function () { }, 1000);
//1000 毫秒,该方法执行一次
setInterval(function () { }, 1000);
//该方法重复执行
6、click和mouseup冲突解决
$(document).ready(function () {
var key = false;
//设置了一个标志 true为点击事件 false为鼠标移动事件
var firstTime = 0;
var lastTime = 0;
$(".sents").mousedown(function () {
firstTime = new Date().getTime();
})
$(".sents").mouseup(function (e) {
lastTime = new Date().getTime();
//触发事件大于200ms,则为mouseup事件
if( (lastTime - firstTime) > 200){
var txt;
var parentOffset = $(this).offset();
var x = e.pageX - parentOffset.left;
var y = e.pageY - parentOffset.top;
$txt = window.getSelection();
if ($txt.toString().length >= 1) {
layui.use('layer', function(){
console.log($txt.toString());
});
}
key = false;
//否则为click事件
}else{
key = true;
}
});
$(".sents>span").on("click",function(){
if(key==true){
var index = $(".sents>span").index(this);
console.log(index);
key = false;
}
})
});
7、jquery循环
$(".main").each(function () {
console.log($(this));
})
8、Jquery生成JSON
var json = [];
<!--循环-->
var is = new Object();
is.name = $(this).find("td").eq(0).html();
is.sentiment = $(this).find("td").eq(1).find("select").find("option[selected]").html();
is.reason = $(this).find("td").eq(2).html();
is.express = $(this).find("td").eq(3).html();
json.push(is);
<!--循环-->
var json_str = JSON.stringify(json);
JSON结果
[
{
"name":"英杰电气",
"sentiment":"0",
"reason":"-1",
"express":"杰电气股,冲击创"
}
,{
"name":"四川英杰电气股份有限公司",
"sentiment":"0",
"reason":"-1",
"express":""
},
{
"name":"证监会",
"sentiment":"0",
"reason":"-1",
"express":""
}
]
9、Laravel中JSON编码中文乱码解决
$json = json_encode($json,JSON_UNESCAPED_UNICODE);
10、javascript获得URL参数
function GetQueryString(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return unescape(r[2]); return null;
}
// 调用方法
alert(GetQueryString("参数名1"));
alert(GetQueryString("参数名2"));
alert(GetQueryString("参数名3"));
11、分页机制
前端demo
<div id="demo7"></div>
Javascrpit代码
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
//完整功能
laypage.render({
elem: 'demo7'
,count: "{{$count}}"
,limit:GetQueryString('limit')
,curr:GetQueryString('page')
,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
,jump: function(obj, first){
//obj包含了当前分页的所有参数，比如：
console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
console.log(obj.limit); //得到每页显示的条数
//首次不执行
if(!first){
//do something
window.location.href="{{url('note_view')}}?page="+obj.curr+"&limit="+obj.limit;
}
}
});
});
后端代码
$page_data = $request->all();
// $page_data['limit']:限制每页显示多少
// $page_data['page']:当前页数
// 主义，页数要-1（重点）
$count = 数据库::条件->count();
$task = 数据库::条件->limit($page_data['limit'])->offset($page_data['limit']*($page_data['page']-1))->get();
效果
image.png
