web前端学习(一） html+js实现文本框背景及只读属性修改
因为工作需求接触了html+javascript，对于从事嵌入式开发，一直接触c和汇编的我，感觉这种语言是一个的全新的领域，宽松的语法要求，等同于文本逻辑的输出，当然我并不认为它简单，错误检查的缺少让我写代码更需要小心翼翼，这里说说我工作要求实现的功能吧。
包含单选按钮和文本编辑框，选中后对应编辑框背景修改为白色，内容可读写，未选中编辑框背景为蓝色，内容只读。
因为初次接触，又多为自学，所以代码的风格偏向于C，不过也是实现功能了，哈哈！
<html>
<head>
<title>Set Number</title>
<meta http-equiv="Content-Type" content="text/html">
<script LANGUAGE="JavaScript">
var check_number = new Array(0, 1); //设置指定id的背景颜色
function setbackgroundcolor(id, value)
{
switch(value)
{
case 0:
document.getElementById(id).style.backgroundColor = "#99CCDD";
break;
case 1:
document.getElementById(id).style.backgroundColor = "#FFFFFF";
break;
default:
break;
}
} //检查radio选中，并设置后面编辑框的属性
function checkstatus(radioname,speedname)
{
var cname = document.getElementsByName(radioname);
var sname = document.getElementsByName(speedname);
for(var i=0; i<cname.length; i++)
{
if(cname[i].checked)
{
sname[i].value = 1;
sname[i].readOnly = false;
setbackgroundcolor(sname[i].id,1);
}
else
{
sname[i].value = 0;
sname[i].readOnly = true;
setbackgroundcolor(sname[i].id,0);
}
}
} //设置radio的默认选中状态
function setcheck(radioname,speedname,num)
{
var cname = document.getElementsByName(radioname);
for(var i=0; i<cname.length; i++)
{
if(i == num)
{
cname[i].checked = "checked";
}
else
{
cname[i].checked = "";
}
}
checkstatus(radioname,speedname,num);
} //html加载完毕后运行
function AutoRun()
{
setcheck('checkone','onespeed',parseInt(check_number[0]));
setcheck('checksecond','secondspeed',parseInt(check_number[1]));
}
</script>
</head> <body bgcolor="#FFFFFF" onload = "AutoRun();">
<input id="1R1C" type="radio" name="checkone" onClick="return checkstatus('checkone','onespeed')" >
<input id="1R1" type="text" name="onespeed" size="3" maxlength="2" value="_admin">
<input id="1R2C" type="radio" name="checkone" onClick="return checkstatus('checkone','onespeed')">
<input id="1R2" type="text" name="onespeed" size="3" maxlength="3" value="_admin">
<input id="1R3C" type="radio" name="checkone" onClick="return checkstatus('checkone','onespeed')">
<input id="1R3" type="text" name="onespeed" size='3' maxlength="3" value="_admin"> </font><br><br>
</br>
<input id="2R1C" type="radio" name="checksecond" onClick="return checkstatus('checksecond','secondspeed')" >
<input id="2R1" type="text" name="secondspeed" size="3" maxlength="2" value="_admin">
<input id="2R2C" type="radio" name="checksecond" onClick="return checkstatus('checksecond','secondspeed')">
<input id="2R2" type="text" name="secondspeed" size="3" maxlength="3" value="_admin">
<input id="2R3C" type="radio" name="checksecond" onClick="return checkstatus('checksecond','secondspeed')">
<input id="2R3" type="text" name="secondspeed" size='3' maxlength="3" value="_admin"> </font><br><br>
</br>
</body>
</html>
web前端学习(一） html+js实现文本框背景及只读属性修改的更多相关文章
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- web前端学习部落22群开源分享 左边菜单导航
有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- web前端学习就这9个阶段，你属于哪个阶段？
第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...
- （纯干货）最新WEB前端学习路线汇总初学者必看
Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...
随机推荐
- 20150629_Andriod_06_插入_删除_弹出式操作数据
Fr_06_view_s6 --> activity_f6_insert --> activity_f7__delete ******************** ...
- Android WebView如何加载assets下的html文件
项目需求:将html文件以及所用到的图片都放在 assets/html/ 目录下.然后在页面上通过WebView来显示 直接付上代码: private void readHtmlFormAssets( ...
- Unity脚本在层级面板中的执行顺序测试1
第二篇测试循环时和动态创建时的调用顺序:LINK 测试版本Unity4.6.因为新版本对Transform的排序做了改变,所以不排除旧版本的测试结果不一样.测试时,使用Awake中添加Debug.lo ...
- 转载-python学习笔记之输入输出功能读取和写入数据
读取.写入和 Python 在 “探索 Python” 系列以前的文章中,学习了基本的 Python 数据类型和一些容器数据类型,例如tuple.string 和 list.其他文章讨论了 Pytho ...
- ExecutorService线程池讲解
ExecutorService 建立多线程的步骤: 1.定义线程类 class Handler implements Runnable{ } 2.建立ExecutorService线程池 Execut ...
- collections在java中的常见用法
1. 工具类collections用于操作集合类,如List,Set,常用方法有: 1) 排序(Sort) 使用sort方法可以根据元素的自然顺序 对指定列表按升序进行排序.列表中的所有元素都必须实现 ...
- easyui datagrid使用参考
数据表格 继承$.fn.panel.defaults,使用$.fn.datagrid.defaults重载默认值. 依赖关系 控制面板 缩放 链接按钮 分页 使用方法 <table id=&qu ...
- 编写一个Java程序，计算一下1,2,…,9这9个数字可以组成多少个互不相同的、无重复数字的三位偶数。
package a; public class SanWeiOuShu { public static void main(String[] args) { String str="1234 ...
- 【leetcode❤python】235. Lowest Common Ancestor of a Binary Search Tree
#-*- coding: UTF-8 -*- # Definition for a binary tree node.# class TreeNode(object):# def __init ...
- N年后给自己一些忠诚的建议
给自己S年后的一封信: 也许,现在的自己已经经历了种种历练,或成为干将,许是拔杆而起的创业者,再者仍然是一名奋斗中的工薪族.无论现在如何,请记得: M年前,自己坐在小房子里写下的信件. 那时候,自己是 ...