本站创建于2006年,博主为Delphi老码农,暗黑忠实粉丝,主要用于学习经验分享
该日志由 samool 发表于 2020-06-13 22:50:15
beforeCreate:在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化
created:在实例创建之后调用。此时已完成数据观测、事件方法,但尚未开始DOM编译,即未挂载到document中
beforeMount:在mounted之前运行。[2.0中的新钩子]
mounted:在编译结束时调用。此时所有指令已生效,数据变化已能触发DOM更新,但不保证$el已插入文档。
beforeUpdate:在实例挂载之后,再次更新实例(例如更新data)时会调用该方法,此时尚未更新DOM结构。[2.0中的新钩子]
updated:在实例挂载之后,再次更新实例并更新完DOM结构后调用。[2.0中的新钩子]
beforeDestroy:在开始销毁实例时调用,此刻实例仍然有效。
destroyed:在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑,子实例也被销毁。
activated:需要配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用该方法。[2.0中的新钩子]
deactivated:需要配合动态组件keep-live属性使用。在动态组件移出的过程中调用该方法。[2.0中的新钩子]
该日志由 samool 发表于 2020-04-19 12:48:00
<!--滚动条到达底部时自动跳转到第二页-->
<script language="javascript">
$(document).ready(function (){
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0; //滚动到的当前位置
var nDivHight = $(".page").height();
$(".page").scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
var paddingBottom = parseInt( $(this).css('padding-bottom') ),paddingTop = parseInt( $(this).css('padding-top') );
if(nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight)
alert("滚动条到底部了");
});
});
</script>
该日志标签: js
该日志由 samool 发表于 2020-02-27 22:45:00
源代码如下:
var second = 0;
window.setInterval(function () {
second ++;
}, 1000);
var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[{}]';
$.cookie('tjRefer', getReferrer() ,{expires:1,path:'/'});
window.onbeforeunload = function() {
if($.cookie('tjRefer') == ''){
var tjT = eval('(' + localStorage.getItem("jsArr") + ')');
if(tjT){
tjT[tjT.length-1].time += second;
var jsArr= JSON.stringify(tjT);
localStorage.setItem("jsArr", jsArr);
}
} else {
var tjArr = localStorage.getItem("jsArr") ? localStorage.getItem("jsArr") : '[{}]';
var dataArr = {
'url' : location.href,
'time' : second,
'refer' : getReferrer(),
'timeIn' : Date.parse(new Date()),
'timeOut' : Date.parse(new Date()) + (second * 1000)
};
tjArr = eval('(' + tjArr + ')');
tjArr.push(dataArr);
tjArr= JSON.stringify(tjArr);
localStorage.setItem("jsArr", tjArr);
}
};
function getReferrer() {
var referrer = '';
try {
referrer = window.top.document.referrer;
} catch(e) {
if(window.parent) {
try {
referrer = window.parent.document.referrer;
} catch(e2) {
referrer = '';
}
}
}
if(referrer === '') {
referrer = document.referrer;
}
return referrer;
}
该日志标签: js, javascript
该日志由 samool 发表于 2019-12-29 13:25:13
跳转页面主要使用window的两个对象方法,setInterval()和setTimeout()
定义和用法
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
语法
setInterval(code,millisec[,"lang"])
参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
语法
setTimeout(code,millisec)
参数 描述
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
<p id="page_div">将在5秒后自动跳转到首页</p>
<script language="javascript">
var num = 4; //倒计时的秒数
var URL = "index.html";
var id = window.setInterval('doUpdate()', 1000);
function doUpdate() {
document.getElementById('page_div').innerHTML = '将在'+num+'秒后自动跳转到首页' ;
if(num == 0) {
window.clearInterval(id);
window.location = URL;
}
num --;
}
</script>
<p id="page_div">将在5秒后自动跳转到首页</p>
<script language="javascript">
var num = 4; //倒计时的秒数
var URL = "index.html";
window.setTimeout("doUpdate()", 1000);
function doUpdate(){
if(num != 0){
document.getElementById('page_div').innerHTML = '将在'+num+'秒后自动跳转到首页' ;
num --;
window.setTimeout("doUpdate()", 1000);
}else{
num = 4;
window.location = URL;
}
}
</script>
该日志标签: js, javascript, 跳转
该日志由 samool 发表于 2019-12-26 05:28:00
获取select 选中的 text :
$("#ddlregtype").find("option:selected").text();
获取select选中的 value:
$("#ddlregtype ").val();
获取select选中的索引:
$("#ddlregtype ").get(0).selectedindex;
设置select 选中的索引:
$("#ddlregtype ").get(0).selectedindex=index;//index为索引值
设置select 选中的value:
$("#ddlregtype ").attr("value","normal“);
$("#ddlregtype ").val("normal");
$("#ddlregtype ").get(0).value = value;
设置select 选中的text:
var count = $("#ddlregtype option").length;
for (var i = 0; i < count; i++) {
if ($("#ddlregtype ").get(0).options[i].text == text) {
$("#ddlregtype ").get(0).options[i].selected = true;
break;
}
}
$("#select_id option[text='jquery']").attr("selected", true);
设置select option项:
$("#select_id").append("<option value='value'>text</option>"); //添加一项option
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的option
$("#select_id option[index='0']").remove(); //删除索引值为0的option
$("#select_id option[value='3']").remove(); //删除值为3的option
$("#select_id option[text='4']").remove(); //删除text值为4的option
清空 select:
$("#ddlregtype ").empty();
工作需要,要获得两个表单中的值。如图:
如何获得从左边选择框添加到右边选择框中的值?我想了想用网页特效可以获得,这里用了比较流行的jquery。
js代码如下:
//获取所有属性值 var item = $("#select1").val();
$(function() {
$('#select1').each( //获得select1的所有值
function() {
$('button').click(function() {
alert($('#select2').val()); //获得select2中的select1值
});
});
})
值得注意的是,不能直接写成
$(function() {
$('#select2').each( //获得select1的所有值,因为前面讲选项从左边添加到右边,jquery其实并没有真正将值从左边传到右边。
function() {
$('button').click(function() {
alert($(this).val()); //获得select2中的select1值
});
});
})
html:
<div class="centent">
<select multiple="multiple" id="select1" name="dd" style="width:100px;height:160px;">
<option value="1">选项1</option>
<option value="2">选项2</option>
<option value="3">选项3</option>
<option value="4">选项4</option>
<option value="5">选项5</option>
<option value="6">选项6</option>
<option value="7">选项7</option>
</select>
<div>
<span id="add">选中添加到右边>></span>
<span id="add_all">全部添加到右边>></span>
</div>
</div>
<div class="centent">
<select multiple="multiple" id="select2" name="sel" style="width: 100px;height:160px;">
</select>
<div>
<span id="remove"><<选中删除到左边</span>
<span id="remove_all"><<全部删除到左边</span>
</div>
</div>
使用JQuery,Ajax调用动态填充Select的option选项
//绑定ClassLevel1单击事件
$("#ClassLevel1").change(function() {
var id = $("#ClassLevel1").val();
var level2 = $("#ClassLevel2");
level2.empty();
$("#ClassLevel3").hide();
$.ajax({
url: "./askCommon.ashx?action=getclasslevel&pid=" + id,
data: {
"type": "ajax"
},
datatype: "json",
type: "get",
success: function(data) {
var json = eval_r(data);
for (var ind in json) {
level2.append($("<option value='" + json[ind].id + "'>" + json[ind].typename + "</option>"));
}
}
});
})
该日志由 samool 发表于 2019-12-14 20:17:00
W3C最新规定,当checkbox未选中,post不会将值提交到服务器,这就出现了一个变量未初始化的问题,看网上有很多朋友增加隐藏表单的方式解决,如果有多个checkbox的话,会增加很大的代码量。
**我找到一个简单的解决办法:
1、通过jquery将value为1的自动设置为checked选中状态
2、提交时执行getCheckBoxVal函数,遍历所有checkbox,将已经选中的,将值设置为1
3、将未选中的选项value设置0,把checkbox选项设置为checked,保持选中状态,保证提交到服务器。**
此方法同样适用于radio组件。
<script>
$(document).ready(function() {
$("#configform").find("input:checkbox[value='1']").prop('checked',true);
})
function getCheckBoxVal(){ //提交前执行,将选中的checkbox的value设置为1,将未选中的checkbox也设置为checked,将值设置为0
$("#configform").find('input:checkbox').each(function() { //遍历所有复选框
if ($(this).prop('checked') == true) {
$(this).val('1');
}
else{
$(this).prop('checked',true);
$(this).val('0');
}
});
}
</script>
该日志标签: js, javascript, jquery, checkbox
该日志由 samool 发表于 2019-12-14 17:25:00
1.导入switchery.css文件
<link rel="stylesheet" type="text/css"
href="${pageContext.request.contextPath}/switchery/switchery.css">
2.导入switchery.js文件
<script type="text/javascript" src="${pageContext.request.contextPath }/switchery/switchery.js"></script>
3.html代码
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label" id="serIsCan">是否可用</label>
<div class="switch">
<input type="checkbox" class="js-switch" checked="">
<span id="enable_status"></span>
</div>
</div>
4.初始化switchery
var elem = document.querySelector('.js-switch');
//size 设置禁用可用按钮的大小、secondaryColor:设置右边的颜色为红色
var switchery = new Switchery(elem,{size:"large",secondaryColor:"red"});
设置switchery的禁用、可用样式
/**
* 设置“禁用/可用”的按钮样式
* @param switchElement
* @param checkedBool
*/
function setSwitchery(switchElement, checkedBool) {
if ((checkedBool && !switchElement.isChecked()) || (!checkedBool && switchElement.isChecked())) {
switchElement.setPosition(true);
switchElement.handleOnchange(true);
}
}
当“禁用/可用”按钮发生改变时,获取当前状态
elem.onchange = function() {
//获取按钮的选中状态
isChecked = elem.checked;
};
设置按钮的可用、禁用状态
//禁用
switchery.disable();
//可用
switchery.enable();
该日志由 samool 发表于 2019-12-14 17:00:00
toastr是一个基于Jquery简单、漂亮的消息提示插件,使用简单、方便,可以根据设置的超时时间自动消失。
1、使用很简单,首选引入toastr的js、css文件
<script src="/res/toastr/toastr.min.js"></script>
<link rel="stylesheet" href="/res/toastr/toastr.min.css">
2、效果
3、集成使用
//常规消息提示,默认背景为浅蓝色
toastr.info("你有新消息了!");
//成功消息提示,默认背景为浅绿色
toastr.success("你有新消息了!");
//警告消息提示,默认背景为橘黄色
toastr.warning("你有新消息了!");
//错误消息提示,默认背景为浅红色
toastr.error("你有新消息了!");
//带标题的消息框
toastr.success("你有新消息了!","消息提示");
//另一种调用方法
toastr["info"]("你有新消息了!","消息提示");
4、自定义用法
通过设置自定义参数,可达到不同的效果
自定义参数:
javascript
toastr.options = {
closeButton: false,
debug: false,
progressBar: true,
positionClass: "toast-bottom-center",
onclick: null,
showDuration: "300",
hideDuration: "1000",
timeOut: "2000",
extendedTimeOut: "1000",
showEasing: "swing",
hideEasing: "linear",
showMethod: "fadeIn",
hideMethod: "fadeOut"
};
参数说明:
closeButton:false,是否显示关闭按钮(提示框右上角关闭按钮);
debug:false,是否为调试;
progressBar:false,是否显示进度条(设置关闭的超时时间进度条);
positionClass,消息框在页面显示的位置
toast-top-left 顶端左边
toast-top-right 顶端右边
toast-top-center 顶端中间
toast-top-full-width 顶端,宽度铺满整个屏幕
toast-botton-right
toast-bottom-left
toast-bottom-center
toast-bottom-full-width
onclick,点击消息框自定义事件
showDuration: “300”,显示动作时间
hideDuration: “1000”,隐藏动作时间
timeOut: “2000”,自动关闭超时时间
extendedTimeOut: “1000”
showEasing: “swing”,
hideEasing: “linear”,
showMethod: “fadeIn” 显示的方式,和jquery相同
hideMethod: “fadeOut” 隐藏的方式,和jquery相同
该日志由 samool 发表于 2013-07-23 08:49:57
第一,JS延迟加载 代码如下: 第二,JS最后加载 在需要插入JS的地方插入以下代码: 程序代码 当然,那个LOADING…你可以换成自己喜欢的小图片.看起来很有AJAX效果呢. 然后在页面最底端插入: 程序代码 第三,JS最后加载 想要显示广告的位置 想要显示的广告内容 src="/frontpage/include/php100.js"></script></div> 判断要显示的广告位置是否存在
程序代码
<script language="JavaScript" src="" id="my"></script>
<script>
setTimeout("document.getElementById('my').src='include/php100.php'; ",3000);//延时3秒
</script>
<SPAN id=L4EVER>LOADING...</SPAN>
<SPAN class=spanclass id=AD_L4EVER>
你的JS代码在这里!</SPAN>
<script>L4EVER.innerHTML=AD_L4EVER.innerHTML;AD_L4EVER.innerHTML="";</script>
<div id="guangg1"></div>
<div id="ggad1" style="display:none"><script language="javascript"
<script>
function chkdiv(divid){
var chkid=document.getElementById(divid);
if(chkid != null)
{return true; }
else
{return false; }
} 最后就是显示广告了
if (chkdiv('guangg1')) {
document.getElementById('guangg1').innerHTML= document.getElementById('ggad1').innerHTML;
document.getElementById('ggad1').innerHTML="";
}
</script>
该日志由 samool 发表于 2011-01-19 20:47:45
<script type="text/javascript">
//处理键盘事件 禁止后退键(Backspace)密码或单行、多行文本框除外
function banBackSpace(e){ var ev = e || window.event;//获取event对象
var obj = ev.target || ev.srcElement;//获取事件源
var t = obj.type || obj.getAttribute('type');//获取事件源类型
//获取作为判断条件的事件类型
var vReadOnly = obj.getAttribute('readonly');
var vEnabled = obj.getAttribute('enabled');
//处理null值情况
vReadOnly = (vReadOnly == null) ? false : vReadOnly;
vEnabled = (vEnabled == null) ? true : vEnabled;
//当敲Backspace键时,事件源类型为密码或单行、多行文本的,
//并且readonly属性为true或enabled属性为false的,则退格键失效
var flag1=(ev.keyCode == 8 && (t=="password" || t=="text" || t=="textarea") && (vReadOnly==true || vEnabled!=true))?true:false;
//当敲Backspace键时,事件源类型非密码或单行、多行文本的,则退格键失效
var flag2=(ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea") ?true:false;
//判断
if(flag2){ return false; } if(flag1){ return false; } }
//禁止后退键 作用于Firefox、Opera
document.onkeypress=banBackSpace;
//禁止后退键 作用于IE、Chrome
document.onkeydown=banBackSpace;
//禁止用F5键
function document.onkeydown()
{
if(event.keyCode==116)
{
event.keyCode = 0;
event.cancelBubble = true;
return false;
}
} </script>