巧妙利用JS中的自定义函数——化繁为简,提高效率
利用自定义函数编写年月日时间表:
(复杂写法)如下:
<body>
<select id="year" size="1" style="width: 70px;"></select>
<select id="month" size="1" style="width: 50px;"></select>
<select id="day" size="1" style="width: 50px;"></select>
</body>
<script>
//年月日选择表
var time =new Date();
var year_now = time.getFullYear();
//选取元素
var slt_year = document.getElementById('year');
var slt_month = document.getElementById('month');
var slt_day = document.getElementById('day');
//利用循环确定年份范围
for(i=1990;i<=year_now;i++){
var opt1 = document.createElement('option');
opt1.innerText = i;
slt_year.appendChild(opt1);
}
//利用循环确定月份范围
for(i=1;i<13;i++){
var opt2 = document.createElement('option');
opt2.innerText = i;
slt_month.appendChild(opt2);
}
//自定义改变事件函数
slt_year.onchange = function(){
change();
}
slt_month.onchange = function(){
change();
}
//自定义函数
function change(){
var year = slt_year.selectedOptions[0].innerText;
var month = slt_month.selectedOptions[0].innerText;
if(month ==4 || month ==6 || month ==9 || month ==11){
slt_day.innerText = "";
for(i=1;i<31;i++){
var new_opt3 = document.createElement('option');
new_opt3.innerText = i;
slt_day.appendChild(new_opt3);
}
}else if(month==2){
if(year%4==0 && year%100 !=0 || year%400==0){
slt_day.innerText = "";
for(i=1;i<30;i++){
var new_opt3 = document.createElement('option');
new_opt3.innerText = i;
slt_day.appendChild(new_opt3);
}
}
else{
slt_day.innerText = "";
for(i=1;i<29;i++){
var new_opt3 = document.createElement('option');
new_opt3.innerText = i;
slt_day.appendChild(new_opt3);
}
}
}else{
slt_day.innerText = "";
for(i=1;i<32;i++){
var new_opt3 = document.createElement('option');
new_opt3.innerText = i;
slt_day.appendChild(new_opt3);
}
}
}
(简写写法)如下:
//自定义改变事件函数
slt_year.onchange = function(){
change();
}
slt_month.onchange = function(){
change();
}
//自定义函数
function change(){
var year = slt_year.selectedOptions[0].innerText;
var month = slt_month.selectedOptions[0].innerText;
if(month ==4 || month ==6 || month ==9 || month ==11){
add_day(30);
}else if(month==2){
if(year%4==0 && year%100 !=0 || year%400==0){
add_day(29);
}else{
add_day(28);
}
}else{
add_day(31);
}
}
//自定义通用函数
function add_day(i_max){
slt_day.innerText = "";
for(i=1;i<=i_max;i++){
var new_opt3 = document.createElement('option');
new_opt3.innerText = i;
slt_day.appendChild(new_opt3);
}
}
巧妙利用JS中的自定义函数——化繁为简,提高效率的更多相关文章
- Entity Framework 6 Recipes 2nd Edition(10-5)译 -> 在存储模型中使用自定义函数
10-5. 在存储模型中使用自定义函数 问题 想在模型中使用自定义函数,而不是存储过程. 解决方案 假设我们数据库里有成员(members)和他们已经发送的信息(messages) 关系数据表,如Fi ...
- js中的回调函数的理解和使用方法
js中的回调函数的理解和使用方法 一. 回调函数的作用 js代码会至上而下一条线执行下去,但是有时候我们需要等到一个操作结束之后再进行下一个操作,这时候就需要用到回调函数. 二. 回调函数的解释 因为 ...
- underscore.js中的节流函数debounce及trottle
函数节流 throttle and debounce的相关总结及想法 一开始函数节流的使用场景是:放止一个按钮多次点击多次触发一个功能函数,所以做了一个clearTimeout setTimeou ...
- js中如何在一个函数里面执行另一个函数
1.js中如何在函数a里面执行函数b function a(参数c){ b(); } function b(参数c){ } 方法2: <script type="text/javasc ...
- 【转载】 Sqlserver中查看自定义函数被哪些对象引用
Sqlserver数据库中支持自定义函数,包含表值函数和标量值函数,表值函数一般返回多个数据行即数据集,而标量值函数一般返回一个值,在数据库的存储过程中可调用自定义函数,也可在该自定义函数中调用另一个 ...
- JavaScript -- 时光流逝(七):js中的全局函数
JavaScript -- 知识点回顾篇(七):js中的全局函数 全局函数可用于所有内建的 JavaScript 对象. (1) encodeURI():把字符串编码为 URI. <script ...
- js中的匿名函数和匿名自执行函数
1.匿名函数的常见场景 js中的匿名函数是一种很常见的函数类型,比较常见的场景: <input type="button" value="点击" id ...
- SparkSQL中的自定义函数UDF
在Spark中,也支持Hive中的自定义函数.自定义函数大致可以分为三种: UDF(User-Defined-Function),即最基本的自定义函数,类似to_char,to_date等 UDAF( ...
- JS中关于把函数作为另一函数的参数的几点小总结
//JS中关于把函数作为函数的参数来传递的问题的小总结//第一,最简单的形式无参函数,直接形式函数的函数名放到括号中,再在执行部分这个函数即可.//当然调用时要穿另一个真正的定义好的函数/*funct ...
随机推荐
- Oracle数据库中的重要对象
数据库中的重要对象:表.视图.序列.函数.存储过程.索引.同义词1.表:用PL/SQL Developer 软件打开 Scott的DEPT表查看SQL,可以看见DEPT表创建的脚本-- Create ...
- 网页在ios下点击无效的原因
之前在做一个项目的时候,发现元素在ios系统中点击无法触发效果,网上查了一下发现 ios下 如果不是button,input这类标签的话 ,如果有点击事件的话最好给加一个css样式cursor:p ...
- Servlet启动的时机
Servlet启动的时机有两个:1.在用户第一次请求时:2.在web应用启动之时. 在web.xml 文件中配置 格式 <servlet> <servlet-name>**** ...
- tp框架表单验证 及ajax
之前的表单验证都是用js写的,这里也可以使用tp框架的验证.但是两者比较而言还是js验证比较好,因为tp框架验证会运行后台代码,这样运行速度和效率就会下降. 自动验证是ThinkPHP模型层提供的一种 ...
- 如何移除HTML5的type=""number""的input标签的上下箭头
初次使用input的数字输入类型type="number"时会发现默认有个上下的箭头,如下图: 很明显这里不需要这个默认箭头,那么我们如何移出这个默认样式呢? 第一种方式,写css ...
- 函数响应式编程及ReactiveObjC学习笔记 (-)
最近无意间看到一个视频讲的ReactiveObjC, 觉得挺好用的 但听完后只是了解个大概. 在网上找了些文章, 有的写的比较易懂但看完还是没觉得自己能比较好的使用RAC, 有的甚至让我看不下去 这两 ...
- C3制作导航栏分割线及立体风格
//首先写一个导航栏样式 .nav{ width:560px; height: 50px; font:bold 0/50px Arial; text-align:center; ...
- .NET CORE——Console中使用依赖注入
我们都知道,在 ASP.NET CORE 中通过依赖注入的方式来使用服务十分的简单,而在 Console 中,其实也只是稍微绕了个小弯子而已.不管是内置 DI 组件或者第三方的 DI 组件(如Auto ...
- 【CSS】伪类与伪元素
一伪类 语法: selector : pseudo-class {property: value} 提示:伪类名称对大小写不敏感. 与 CSS类搭配使用 selector.class : pse ...
- 存储结构比较vector,list,dequeue,stack(转)
vector适用:对象数量变化少,简单对象,随机访问元素频繁list适用:对象数量变化大,对象复杂,插入和删除频繁最大的区别是,list是双向的,而vector是单向的.因此在实际使用时,如何 ...