保证一个类只有一个实例, 并提供一个访问它的全局访问点。
2、如何实现一个单例模式
实现一个简单的单例模式:
创建一个类,类中有一个方法能够创建该类的实例对象,还有一个标记,记录是否创建过实例对象。创建过则直接用实例对象的引用。否则再次创建
3、什么情况可以使用单例模式(有什么用处)
(1)缓存数据(点击触发获取实验字段时)
(2)获取实例值不确定使用位置获取实例时是否已经有实例。每次调用都走一遍内部逻辑获取实例
使用场景:
Rn
h5页面中同一个路由下写在最上层时
每一个import进来的组件其实都属于一个单例模式
将变量缓存再windows上也是一个单例模式、但windows随意挂载变量的话后续不好维护
JS获取多选框checkbox被选中的个数。var
checkbox
=
document.getElementsByName("likes[]")
//此处通过此种方式才能获得多选框为数组。
//like为name
=
"like[]"
,
获得时必须加上[]
var
checked_counts
=
0
for(var
i=0i<checkbox.lengthi++){
if(checkbox[i].checked){
//被选中的checkbox
checked_counts++
}
}
alert(checked_counts)
我做的是每点击一下多选框就判断当前checked个数是否超过某个数值
function
checkDate(){
var
n
=
$("#cart_q_num").val()
var
checkedCount=0
var
checkbox
=
document.getElementsByName("tie_in[]")
//alert(checkbox.length)
for(var
i=0i<checkbox.length
i
++){
if(checkbox[i].checked){
checkedCount++
}
}
//alert(checkedCount)
if(checkedCount>n){
alert("The
quantity
of
the
gifts
should
equal
to
the
quantity
of
the
sunglasses
set.")
return
false
}else{
$("#free_pro_selected_num").html(checkedCount)
}
}
要使函数checkdata()每次点击都发挥作用,需要在checkbox框中添加onclick事件:
<input
type="checkbox"
name="tie_in[]"
value="1"
onClick="return
checkData()"
/>
以上这篇JS获取checkbox的个数简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
目标描述:多个图片排列下来,按右边的小按钮,抵达相应位置,鼠标滑动,抵达下一图,或者上一图知识点:onmousewheel,addEventListener,scrollTo,setTimeout
过程:
1.body 宽,高钉死,100vw,100vh,overflow:hidden 使得不出现滚动条,不然不好看
2.图片放进去,排起来,(注意:默认空隙的处理,可以使用flex布局,空隙就不见了)
3.制作相对于视窗的按钮,几张图片就几个按钮,(position: fixed计算一下高度,可以利用calc计算top使得上下居中)
4.美化一下,css写写
5.先写简单的按钮事件
6.写监听滑动事件(onmousewheel在火狐无效,DOMMouseScroll只在火狐有效)
react在componentDidMount的时候监听
7.补充写一下火狐的
9.测试检查一下。
完成啦,啦啦啦~
我的截图:
缺点:这里我是一直对页面进行监听,导致滑动过快对时候动画效果开始执行对时间延后。体现为滑动对轻,整个就流畅一点。
ps:写这种带计算带页面,我觉得是考验思维的,你可以对这里的知识点不熟练,但是你必须得能理解每一步的加加减减。