javascript 计算器、动态时钟、表格复选框全选（扩展）、轮播图、36选7、随机数...

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/javascript" href="../js/jisuanqi.js">
</head><body><div>请输入数字1<input type="text" id = "shu1"></div><div>请输入数字2<input type="text" id = "shu2"></div><div>符号:<select id="fh"><option>+</option><option>-</option><option>*</option><option>/</option></select></div><div><input type="button" onClick="jisuan()" value="结果"><span id="jieguo"></span></div>
</body>
</html>
<script>function jisuan(){var n1 = document.getElementById("shu1").value;var n2 = document.getElementById("shu2").value;var fh = document.getElementById("fh").value;document.getElementById("jieguo").innerHTML = eval(n1+fh+n2);}
</script>

简易计算器

效果显示：

// JavaScript Document
//使用json制作一个简易的计算器
var jsq = {//初始化页面init : function(obj){obj.innerHTML = `<input type="text" id="txt"><br><button class>7</button><button >8</button><button >9</button><button >+</button><br><button >4</button><button >5</button><button >6</button><button >-</button><br> <button >1</button><button >2</button><button >3</button><button >*</button><br> <button >0</button><button >.</button><button class="dengyu">=</button><button >/</button>`;//函数的调用jsq.addEvent();},addEvent : function(){//获取所有的按钮var btns = document.getElementsByTagName("button");//for循环for(var i = 0; i<btns.length;i++){btns[i].style.width = "30px";if(btns[i].getAttribute("class") == "dengyu"){btns[i].addEventListener("click",jsq.jisuan);continue;}btns[i].addEventListener("click",jsq.getVal);}},getVal: function(){var txtObj = document.getElementById("txt");txtObj.value = txtObj.value + this.innerHTML;},jisuan:function(){var txtObj = document.getElementById("txt");txtObj.value = eval(txtObj.value);}}

json实现计算器

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title></head><body><h3 onClick="showtime(this)" id="as1"></h3></body></html><script>var weq=document.getElementById('as1'); //建立显示时钟方法function showtime(){//定义一个新的日期var dy=new Date();var year=dy.getFullYear(),month=dy.getMonth(),date=dy.getDate();var hours=dy.getHours(),mients=dy.getMinutes(),semiao=dy.getSeconds();//设置年月日的范围if(month<10){var jia="0"+(month+1);}else{jia=+(month+1);}if(date<10){var jian="0"+(date+1);}else{jian=+(date+1);}var time=year+"-"+jia+"-"+jian+" "+hours+":"+mients+":"+semiao;weq.innerHTML=time;}//页面加载完成后实现实时时刻，每一秒换一个数字
             window.onload=function(){time = setInterval("showtime()",1000);}</script>

动态时钟代码

表格复选框点击全选，则复选框全部显示为选中状态

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script type="text/javascript" src="../js/fuxuan.js"></script>    </head><body>
<label><input type="checkbox" id="all" >全选</label><br><input type="checkbox" class="all"><input type="checkbox" class="all"><input type="checkbox" class="all"><input type="checkbox" class="all"></body></html><script>window.onload = function(){var inputall = document.getElementById("all");inputall.addEventListener("click",checkes);
}
function checkes(){var obj = this;var objs = document.getElementsByClassName("all");for(var i = 0;i<objs.length;i++){objs[i].checked = obj.checked;}
}</script>

复选框点击全选则全部为选中状态

效果如下：

    <!doctype html><html><head><meta charset="utf-8"><title>复选框扩展</title><script type="text/javascript" src="../js/fuxuankuozhan2.js"></script></head><body><table border="1" width="80%"><tr><th><input type="checkbox" id="all">全选</th><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td><input type="checkbox" class="all" onClick="qx()"></td><td>张三</td><td>男</td><td>23</td></tr><tr><td><input type="checkbox" class="all" onClick="qx()"></td><td>李四</td><td>男</td><td>25</td></tr><tr><td><input type="checkbox" class="all" onClick="qx()"></td><td>王五</td><td>女</td><td>23</td></tr></table></body></html>

复选框扩展HTML代码

// JavaScript Document
var oth = null;
window.onload= function(){oth=document.getElementsByClassName("all");for(var j=0;j<oth.length;j++){oth[j].addEventListener("click",all);}
}
function qx(){var shu = 0;var a= document.getElementById("all");var other = document.getElementsByClassName("all");for(var i in oth){if(oth[i].checked == false){shu = 1;}if(shu == 1){a.checked=false;}else{a.checked=true;}}
}

复选框扩展JavaScript代码

效果如下：

实现轮播图_鼠标放上和移开关联自动轮播

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
</head><body><div><button onclick="up()">上一张</button><img src="../../image/b5.jpg" onMouseOut="start()" onMouseMove="stop()" id="img1"><button onClick="next()">下一张</button></div>
</body>
</html>
<script type="text/javascript">var p1=document.getElementById("img1"),//定义一个变量 获取所需元素
                 n=0,//随便定义一个下标
                 arr=['../../image/b8.jpg','../../image/b9.jpg','../../image/b5.jpg'];//将要轮播的图片存入function next(){//建立方法 点击下一张的设置
                 img1.setAttribute("src",arr[n]);//设置图片属性
                 n++;if(n>2){//判断下标的情况
                     n=0;}}function up(){//建立方法 点击上一张的设置
                 img1.setAttribute("src",arr[n]);//同样设置图片属性
                 n--;if(n<0){//判断下标
                     n=1;}}var aaa="";//定义一个变量为空
         window.onload=function(){//加载完后的操作
             aaa=setInterval('next()',2000);//定时器的设置 1s
         }function stop(){//鼠标移上图的时候停止的操作
             clearInterval(aaa);//
         }function start(){//鼠标移出图的时候停止的操作
             aaa=setInterval('next()',2000);//1s
         }</script>

实现简单三张图片轮播HTML代码

转载于:https://www.cnblogs.com/sc1314-1218/p/8463819.html

javascript 计算器、动态时钟、表格复选框全选（扩展）、轮播图、36选7、随机数...相关推荐

JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端学习路线笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
web前端期末大作业：JavaScript大作业——福五鼠动漫网页制作(6页)带轮播图效果学生个人单页面网页作业学生网页设计成品静态HTML网页单页制作
HTML实例网页代码, 本实例适合于初学HTML的同学.该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代 ...
axure原型怎么让文字自动换行_Axure动态面板教程（快速入门+轮播图案例）
动态面板(Dynamic Panel)是Axure的核心功能之一,但很多初学者都反馈理解有难度,今天用一个简单的例子让大家快速掌握它,并且学会做一个常用的轮播图. 12月21日更新:B站视频版教程: ...
spring boot+bootstrap实现动态轮播图实战
1.bootstrap轮播图最近开发了个网站需要用到轮播图,正好前端用的是Bootstrap,这里就实战一下. 水平一般能力有限,仅供参考. 前提条件: bootstrap4.5 jquery 3张 ...
html bootstrap复选框全选,javascript+bootstrap+html实现层级多选框全层全选和多选功能代码实例...
想做一个先按层级排序并可以多选的功能,首先倾向于用多层标签式的,直接选定加在文本域里,接下来通过本文给大家介绍html+javascript+bootstrap实现层级多选框全层全选和多选功能,需要的 ...
jQuery中的几个案例：隔行变色、复选框全选和全不选
1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...
HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
复选框全选效果，根据单个复选框的选择情况确定全选复选框是否被选
复选框全选与全不选效果逻辑:复选框的checked属性与复选框全选效果对应起来,全选复选框checked:true 时,全部复选框checked:true: 全选框checked:false 时,全 ...
Jquery 复选框全选与反选点击执行一次然后失效解决方案
Jquery 复选框全选与反选点击执行一次然后失效解决方案参考文章: (1)Jquery 复选框全选与反选点击执行一次然后失效解决方案 (2)https://www.cnblogs.com/feng ...

javascript 计算器、动态时钟、表格复选框全选（扩展）、轮播图、36选7、随机数...

javascript 计算器、动态时钟、表格复选框全选（扩展）、轮播图、36选7、随机数...相关推荐

最新文章

热门文章