标签:back alt 当前时间 mes 电子时钟 文本 运用 操作 child
1、简单计算器
<!-- 第一个数--> <input type="text"> <!-- 符号复选框--> <select name="" id=""> <option>+</option> <option>-</option> <option>*</option> <option>/</option> <option>%</option> </select> <!-- 第二个数--> <input type="text"> <!-- 计算按钮--> <button onclick="jisuan()">=</button> <!-- 结果输出--> <input type="text" placeholder="结果">
//全局变量 var inputs = null;//文本框 var input1 = null;//第一个文本框 var input2 = null;//第二个文本框 var select1 = null;//下拉框 var input3 = null;//结果文本框 //页面加载 window.onload = function(){ initVal(); } //找到各元素 function initVal(){ select1 = document.getElementsByTagName(‘select‘)[0]; inputs = document.getElementsByTagName(‘input‘); input1 = inputs[0]; input2 = inputs[1]; input3 = inputs[2]; } //结果计算 function jisuan(){ input3.value = eval(input1.value + select1.value + input2.value); }
2、电子时钟
<input id="tt" type="text"><!--建立文本框显示时间--> <script> function dianziTime(name){ var t = new Date(),//新建一个时间 y = t.getFullYear(),//获取年 m = (+t.getMonth()+1) >= 10 ? +t.getMonth()+1 : "0" +(+t.getMonth()+1), //获取月份,月份下标是(0-11),与实际日期差1 //三目运算,如果是1位数,前面加0 d = t.getDate(),//获取日 h = t.getHours(),//获取小时 f = t.getMinutes(),//获取分钟 s = t.getSeconds();//获取秒 var str = y+"-"+m+"-"+d+" "+h+":"+f+":"+s;//显示设置 document.getElementById(‘tt‘).value = str;//将时间放在id="tt"中 } </script>
注:此方法获取的时间是刷新页面时的时间,非动态
获取日期,当前时间日期及其他操作方式:
var myDate = new Date(); myDate.getYear(); //获取当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位,1970-????) myDate.getMonth(); //获取当前月份(0-11,0代表1月) myDate.getDate(); //获取当前日(1-31) myDate.getDay(); //获取当前星期X(0-6,0代表星期天) myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数) myDate.getHours(); //获取当前小时数(0-23) myDate.getMinutes(); //获取当前分钟数(0-59) myDate.getSeconds(); //获取当前秒数(0-59) myDate.getMilliseconds(); //获取当前毫秒数(0-999) myDate.toLocaleDateString(); //获取当前日期 var mytime=myDate.toLocaleTimeString(); //获取当前时间 myDate.toLocaleString( ); //获取日期与时间
动态时间的获取(定时器):
window.onload = function(){ setInterval(function(){ //建立定时器,每1秒运行一次 dianziTime(); },1000); }
3、元素的添加删除和修改
<!--创建按钮--> <button onClick="tianjia()" style="background: red;">添加一行</button> <!--创建表格--> <table id="tab" border="1"> <tr> <td>编号</td> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>操作</td> </tr> <tr> <td>1</td> <td>张三</td> <td>男</td> <td>12</td> <td><span>删除</span></td> </tr> <tr> <td>123</td> <td>223</td> <td>323</td> <td>323</td> <td><span>删除</span></td> </tr> </table>
//添加td并修改内容 function tianjia(){ var tab = document.getElementById("tab"); var tr = document.createElement("tr"); for (var i = 0; i < 5; i++) { var td = document.createElement("td"); if(i < 4){ td.innerHTML = 123; } // 添加子节点 else{ var span = document.createElement("span"); span.innerHTML = "删除"; td.appendChild(span); span.onclick = function(){ tr.remove(); } var button = document.createElement("button") button.innerHTML = "变色"; td.appendChild(button); button.onclick = function(){ tr.style.color = "red"; } } tr.appendChild(td); } tab.appendChild(tr); }
效果:
4、随机点名
var arr = ["赵","钱","孙","李","周","吴","郑","王","冯","陈"];//新建数组 var i = parseInt(Math.random()*10); //Math.random()的返回值是在0-1之间的,因为有10个值,所以*10,并取整数,作为数组arr的下标 console.log(i); console.log(arr[i]);
方法:Math.random()
返回大于等于 0 小于 1 的一个随机数。
5、滚动抽奖
<!--建立开始按钮 --> <button id="start">开始</button> <!--建立结束按钮--> <button id="end">停止</button> <!--显示名字--> <div id="dd" style="width: 300px; height: 50px;background: red;text-align: center; line-height: 50px;"> </div>
//定义全局变量 var divDom = null;//显示div var startDom = null;//开始按钮 var endDom = null;//结束按钮 //页面加载完成 window.onload = function(){ divDom = document.getElementById(‘dd‘);//找到区域 startDom = document.getElementById(‘start‘);//找到开始按钮 endDom = document.getElementById(‘end‘);//找到结束按钮 } //运行 function addEvent(){ //开始事件 startDom.onclick = function(){ //点击运行方法 setDom = setInterval(function(){ //建立一个定时器,每1毫秒显示一次 divDom.innerHTML = arr[n]; //将arr[0]中的内容赋值给div n++; if(n >= 10){ n = 0; } //当n=10时,运行完一边,设置n=0,再重新循环 },1); } //结束事件 endDom.onclick = function(){ clearInterval(setDom);//清除定时器 } }
标签:back alt 当前时间 mes 电子时钟 文本 运用 操作 child
原文地址:https://www.cnblogs.com/Ace-suiyuan008/p/9220072.html