js效果(一):上传的图片预览
$("#path").change(function(){
var objUrl = getObjectURL(this.files[0]) ;
console.log("objUrl = "+objUrl) ;
if (objUrl) {
$("#img0").attr("src", objUrl) ;
}
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
<img src="images/head_int_03.gif" id="img0">
<input type="file" id="path" name="path" style="display:none" οnchange="upfile.value=this.value" multiple="multiple">
checkbox实现全选功能:
function selectall()
{
var a = document.getElementsByTagName("input");
for (var i=0; i<a.length; i++)
if (a[i].type == "checkbox") a[i].checked =!a[i].checked;
}
实现购物车加减功能:
$.fn.iVaryVal=function(iSet,CallBack){
/*
* Minus:点击元素--减小
* Add:点击元素--增加
* Input:表单元素
* Min:表单的最小值,非负整数
* Max:表单的最大值,正整数
*/
iSet=$.extend({Minus:$('.J_minus'),Add:$('.J_add'),Input:$('.J_input'),Min:0,Max:20},iSet);
var C=null,O=null;
//插件返回值
var $CB={};
//增加
iSet.Add.each(function(i){
$(this).click(function(){
O=parseInt(iSet.Input.eq(i).val());
(O+1<=iSet.Max) || (iSet.Max==null) ? iSet.Input.eq(i).val(O+1) : iSet.Input.eq(i).val(iSet.Max);
//输出当前改变后的值
$CB.val=iSet.Input.eq(i).val();
$CB.index=i;
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
}
});
});
//减少
iSet.Minus.each(function(i){
$(this).click(function(){
O=parseInt(iSet.Input.eq(i).val());
O-1<iSet.Min ? iSet.Input.eq(i).val(iSet.Min) : iSet.Input.eq(i).val(O-1);
$CB.val=iSet.Input.eq(i).val();
$CB.index=i;
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
}
});
});
//手动
iSet.Input.bind({
'click':function(){
O=parseInt($(this).val());
$(this).select();
},
'keyup':function(e){
if($(this).val()!=''){
C=parseInt($(this).val());
//非负整数判断
if(/^[1-9]\d*|0$/.test(C)){
$(this).val(C);
O=C;
}else{
$(this).val(O);
}
}
//输出当前改变后的值
$CB.val=$(this).val();
$CB.index=iSet.Input.index(this);
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
}
},
'blur':function(){
$(this).trigger('keyup');
if($(this).val()==''){
$(this).val(O);
}
//判断输入值是否超出最大最小值
if(iSet.Max){
if(O>iSet.Max){
$(this).val(iSet.Max);
}
}
if(O<iSet.Min){
$(this).val(iSet.Min);
}
//输出当前改变后的值
$CB.val=$(this).val();
$CB.index=iSet.Input.index(this);
//回调函数
if (typeof CallBack == 'function') {
CallBack($CB.val,$CB.index);
}
}
});
}
//调用
$( function() {
$('.i_box').iVaryVal({},function(value,index){
});
});
购物车加减功能2:
<script>
$(function(){
$(".add").click(function(){
var t = $(this).parent().find(".text_box");
t.val(parseInt(t.val())+1)
setTotal();
})
$(".min").click(function(){
var t = $(this).parent().find(".text_box")
t.val(parseInt(t.val())-1)
setTotal();
})
function setTotal(){
$("#total").html((parseInt(t.val())*3.95).toFixed(2));
}
setTotal();
})
</script>
HTML:
<a href="javascript:;" class="J_minus"><div class="fl cir_btn border_2">-</div></a>
<input id="text_box" name="" type="text" value="1" class="J_input fl"/>
<a href="javascript:;" class="J_add"><div class="fl cir_btn border_2">+</div></a>