案例
作者：互联网
计算器
var input,divs,firsValue,symbol;
init();
/*
获取input和所有被点击的divs列表，并且，循环
所有的divs元素，给每个添加点击事件，点击后执行
clickHandler函数
*/
function init(){
input=document.getElementById("input");
divs=document.getElementsByClassName("divs");
for(var i=0;i<divs.length;i++){
divs[i].onclick=clickHandler;
}
}
/*
当点击divs时，进入下面的函数，this就是被点击的那个div
判断div的内容是不是数值，如果是数值，将innerHTML的内容
传参到addNumber函数中
*/
function clickHandler(){
if(!isNaN(this.innerHTML)){
//点击数字进入
addNumber(this.innerHTML)
}else if(this.innerHTML==="c"){
// 点击C进入
clearIput();
}else if(this.innerHTML==="="){
// 点击=进入
calculate();
}else{
// 点击+ - * /进入 并且传入当前点击的符号
changeSymbol(this.innerHTML);
}
}
//把输入框内原本的文本内容链接传入的这个数值字符串，
//把链接好的字符串把他们转换成数值，这样就可以去掉前面的0
function addNumber(n){
input.value=Number(input.value+n);
}
/*
执行这个内容是会清除里面的内容
*/
function clearIput(){
input.value="0";
Symbol="";
firstValue="";
}
function calculate(){
// console.log(firstValue,Symbol);
// console.log(input.value);
//如果symbol是什么字符,根据字符完成firstValue和现在当前文本的运算
switch(Symbol){
case "+":
input.value=Number(input.value)+Number(firstValue);
break;
case "-":
input.value=firstValue-input.value;
break;
case "*":
input.value=firstValue*input.value;
break;
case "/":
input.value=firstValue/input.value;
break;
}
}
function changeSymbol(type){
//type就是点击的符号,Input.value就是现在文本框显示数字
// 分别把这两个内容储存在全局变量symbol和firstValue中
Symbol=type;
firstValue=input.value;
input.value="0";
}
表单框验证1224
<input type="text" name="user"><label></label>
<script>
var ids;
var input=document.querySelector("input");
var label=document.querySelector("label");
input.addEventListener("input",inputHandler);
function inputHandler(e){
if(ids) return;
ids=setTimeout(function(){
clearTimeout(ids);
ids=undefined;
if(verifyValue(input.value)){
label.textContent="输入正确";
label.className="sucess";
}else{
label.textContent="输入错误";
label.className="error";
}
})
}
function verifyValue(str){
// return /\d/.test(str);
// return /^[1-9]$|^[12]\d$|^3[01]$/.test(str);//1-31
// return /^1\d{10}$/.test(str);
// return /^\w{1,30}\@\w{1,10}\.\w{2,4}$/.test(str);//邮箱验证
return /^[1-9]$|^[1-9]\d$|^[1]\d\d$|^[2][0-4]\d$|^[2][5][0-5]$/.test(str)//1-255
}
// 1-30 字符
// @
// 1-10 字符
// .
// 2-4 字符
</script>
菜单 1222
<script>
// var lis=document.querySelectorAll("li");
// for(var i=0;i<lis.length;i++){
// lis[i].addEventListener("click",clickHandler);
// }
// function clickHandler(e){
// if(!this.firstElementChild) return;
// e.stopPropagation();
// var ul=this.firstElementChild;
// if(ul.getAttribute("open")!=="true"){
// ul.setAttribute("open","true");
// }else{
// ul.removeAttribute("open");
// }
// }
var city=document.querySelector(".city");
city.addEventListener("click",clickhandler);
function clickhandler(e){
if(e.target.nodeName!=="LI") return;
var ul=e.target.firstElementChild;
if(!ul) return;
if(ul.getAttribute("open")!=="true"){
ul.setAttribute("open","true");
}else{
ul.removeAttribute("open");
}
}
</script>
倒计时 1217
<script>
var div,startBn,stopBn,date;
var bool=false,value=0;
init();
/*
初始函数
获取div元素，开始按钮和停止按钮
给开始按钮增加点击事件，执行clickStartHandler函数
给停止按钮增加点击事件，执行clickStopHandler函数
开启setInterval，每间隔16毫秒执行show函数
*/
function init(){
div=document.getElementById("div1");
startBn=document.getElementById("startBn");
stopBn=document.getElementById("stopBn");
startBn.onclick=clickStartHandler;
stopBn.onclick=clickStopHandler;
setInterval(show,1);
}
/*
当点击开始按钮时的事件处理函数
改变这个按钮开始或者暂停的显示
改变开关，影响时间间隔函数是否进入函数内处理内容
点击开始时获取当期时间，用来作为显示时不断被减的时间值
点击暂停时，不断累加本次暂停前时间差
如果点击按钮内容是"开始",认为这个时候开始每间隔16毫秒执行show
函数，先把按钮里面的内容修改"暂停",设置开关为true，当设置为true
show函数，每16毫秒执行时就会判断这个开会是不是true，如果是false
时就会跳出，不执行后面的内容
存储当前时间
如果点击按钮的内容不是"开始"，而是"暂停"时,这个时候，我们先把按钮
里面的内容修改为开始，设置开关为false，这样就会影响show函数每16毫秒
判断不在进入函数里面执行内容，
累加当前暂停前的时间差，用于下次启动对于数据的累加
*/
function clickStartHandler(){
if(this.innerHTML==="开始"){
this.innerHTML="暂停"
bool=true;
date=new Date();
}else{
this.innerHTML="开始";
bool=false;
value+=Date.now()-date.getTime();
}
}
/*
点击停止按钮
清除所有时间差
清除div中显示归0
将开始按钮固定内容为"开始"
开关变为false，不再执行show里面的内容了
*/
function clickStopHandler(){
value=0;
div.innerHTML="00:00:000";
startBn.innerHTML="开始";
bool=false;
}
/*
show函数 每间隔16毫秒执行这个函数
如果开关是false时，不执行这个函数内容，直接跳出
先获取到当前运行的时间差，加上以前暂停前累加的时间差
分别计算出小时，分，秒，毫秒
并且再div中显示
*/
function show(){
if(!bool) return;
var num=(Date.now()-date.getTime())+value;
var h=~~(num/3600/1000);
var m=~~((num-h*3600000)/1000/60);
var s=~~((num-h*3600000-m*60000)/1000);
var ms=~~(num%1000);
div.innerHTML=getNum(m)+":"+getNum(s)+":"+getNum(ms,3);
}
function getNum(n,m){
if(m===undefined) m=2;
n=String(n);
for(var i=n.length;i<m;i++){
n="0"+n;
}
return n
}
</script>
电梯导航 1220
<script>
var lis,div;
var targetTop=0;
var speed=0,time=10;
init();
/*
获取li和div列表，li列表需要转换为数组
循环给每个li增加点击事件
设置事件间隔
*/
function init(){
lis=Array.from(document.querySelectorAll("li"));
div=document.querySelectorAll("div");
for(var i=0;i<lis.length;i++){
lis[i].onclick=clickHandler;
}
setInterval(move,16);
}
/*
time!=0跳出这个条件正在运行时，不可以点击
获取到当前被点击的元素是数组中第几个下标，对应的div需要跳转到第几个位置
获取这个第几个div的距离顶端的距离
计算目标位置与当前位置的差值，除以10，分10次运行每次运行的速度
*/
function clickHandler(){
if(time!==10) return;
var index=lis.indexOf(this);
targetTop=div[index].offsetTop;
speed=(targetTop-document.documentElement.scrollTop)/time;
}
/*
当目标位置的结果不是0时，执行move函数
如果当前次数等于0，表示运行次数完成
将目标位置归0，下次不进入，将当前的次数重新变为10，跳出
如果当前次数不是0的时候，time-1，设置滚动条的位置为当前位置+speed
*/
function move(){
if(targetTop===0) return;
if(time===0){
targetTop=0;
time=10;
return;
}
time--;
document.documentElement.scrollTop+=speed;
}
</script>
轮播图 1221
<script>
var imgIconList,imgList,prevImg,prevIcon;
init();
function init(){
imgIconList=Array.from(document.querySelectorAll(".crousel>ul img"));
imgList=Array.from(document.querySelectorAll(".crousel>.img-con>img"));
for(var i=0;i<imgIconList.length;i++){
imgIconList[i].onclick=clickhandler;
}
changePrev(0);
}
function clickhandler(){
var index=imgIconList.indexOf(this);
changePrev(index);
}
function changePrev(index){
if(prevImg) prevImg.style.opacity=0;
if(prevIcon) prevIcon.style.borderColor="transparent"//"#FF9D00"
prevImg=imgList[index];
prevIcon=imgIconList[index];
prevImg.style.opacity=1;
prevIcon.style.borderColor="#FF9D00";
}
</script>
选色块--历史记录1221
<script>
var prev;
var bus=Array.from(document.querySelectorAll("button"));
var divs=document.querySelectorAll("div");
//替换当前状态的数据
history.replaceState({num:0},"0");
changePrev(0);
for(var i=0;i<bus.length;i++){
bus[i].onclick=clickHandler;
}
window.onpopstate=popStateHandler;
function clickHandler(){
var index=bus.indexOf(this);
//往他的尾部添加一个状态
history.pushState({num:index},index);
changePrev(index);
}
function changePrev(index){
if(prev){
prev.style.display="none";
}
prev=divs[index];
prev.style.display="block";
}
function popStateHandler(){
//添加监听事件
changePrev(history.state.num);
}
</script>
导航栏1223
<script>
var ul,divs,div,prev;
init();
function init(){
ul=document.querySelector("ul");
divs=document.querySelectorAll(".div1")
div=document.querySelector("ul>div");
ul.addEventListener("mouseover",mouseoverHandler);
movePoistion(ul.children[1]);
}
function mouseoverHandler(e){
if(e.target.nodeName!=="LI") return;
movePoistion(e.target);
}
function movePoistion(li){
div.style.left=li.offsetLeft+"px";
var index=Array.from(ul.children).slice(1).indexOf(li)
if(prev){
prev.style.display="none";
}
prev=divs[index];
prev.style.display="block";
}
</script>
拖拽1223
<script>
// var div1=document.querySelector(".div1");
// div1.onmousedown=function(evt){
// // 先按下鼠标键 针对div1按下键
// document.onmousemove=function(e){
// // 鼠标移动 针对document移动 每次移动获取当前鼠标相对视口的距离-按下瞬间时相对当前div1的左上角距离
// div1.style.left=e.clientX-evt.offsetX+"px";
// div1.style.top=e.clientY-evt.offsetY+"px";
// }
// div1.onmouseup=function(){
// document.onmousemove=null;
// }
// }
/* var x1=0,y1=0;
var div1=document.querySelector(".div1");
div1.addEventListener("mousedown",mousedownHandler);
function mousedownHandler(e){
// e.offsetX,e.offsetY
x1=e.offsetX;
y1=e.offsetY;
document.addEventListener("mousemove",mousemoveHandler);
document.addEventListener("mouseup",mouseupHandler);
}
function mousemoveHandler(e){
div1.style.left=e.clientX-x1+"px";
div1.style.top=e.clientY-y1+"px";
}
function mouseupHandler(e){
document.removeEventListener("mousemove",mousemoveHandler);
document.removeEventListener("mouseup",mouseupHandler);
} */
var x1=0,y1=0;
var div1=document.querySelector(".div1");
div1.addEventListener("mousedown",mouseHandler);
function mouseHandler(e){
if(e.type==="mousedown"){
x1=e.offsetX;
y1=e.offsetY;
document.addEventListener("mousemove",mouseHandler);
document.addEventListener("mouseup",mouseHandler);
}else if(e.type==="mousemove"){
div1.style.left=e.clientX-x1+"px";
div1.style.top=e.clientY-y1+"px";
}else if(e.type==="mouseup"){
document.removeEventListener("mousemove",mouseHandler);
document.removeEventListener("mouseup",mouseHandler);
}
}
</script>
标签：function,案例,init,var,div,document,div1 来源： https://www.cnblogs.com/ciyisheng/p/15733029.html