因为工作需求接触了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">&nbsp;&nbsp;&nbsp;

          <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">&nbsp;&nbsp;&nbsp;

          <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">&nbsp;&nbsp;&nbsp;</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">&nbsp;&nbsp;&nbsp;

          <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">&nbsp;&nbsp;&nbsp;

          <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">&nbsp;&nbsp;&nbsp;</font><br><br>

          </br>

  </body>

</html>

web前端学习(一） html+js实现文本框背景及只读属性修改的更多相关文章

  1. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  2. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  3. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  4. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  5. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  6. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  7. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  8. web前端学习就这9个阶段，你属于哪个阶段？

    第一阶段:HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础:Js基础教程.js内置对象常用方法.常见DOM树操作大全.ECMAsc ...

  9. （纯干货）最新WEB前端学习路线汇总初学者必看

    Web前端好学吗?这是很多web学习者常问的问题,想要学习一门自己从未接触过的领域,事先有些了解并知道要学的内容,对接下来的学习会有事半功倍的效果.在当下来说web前端开发工程师可谓是高福利.高薪水的 ...

随机推荐

  1. [Unity3D][Vuforia][ios]使用vuforia的unity3d库在ios中摄像头只显示黑色，不显示摄像头，NO CAMERA的解决方案

    注:我使用的是Vuforia 4.0SDK Unity3D5.0版本,跑的ios系统为8.1 我在Vuforia官方讨论贴子中看到这其实是新手都会遇到的问题 贴子地址: https://develop ...

  2. Oracle列操作引起的全表扫描

    首先是一种比较明显的情况: select * from table where column + 1 = 2 这里对column进行了列操作,加1以后,与column索引里的内容对不上,导致colum ...

  3. android异步加载图片并缓存到本地实现方法

    图片过多造成内存溢出,这个是最不容易解决的,要想一些好的缓存策略,比如大图片使用LRU缓存策略或懒加载缓存策略.今天首先介绍一下本地缓存图片     在android项目中访问网络图片是非常普遍性的事 ...

  4. 连接无线设备——与Wi-Fi直接连接

    原文链接:http://developer.android.com/intl/zh-CN/training/connect-devices-wirelessly/wifi-direct.html 目录 ...

  5. poj2269 Friends

    计算表达式. 只有3种运算符:*,+,- , *优先级高于后两者,后两者优先级相同. 有两种符号:{},(). 利用递归和堆栈即可解决. 首先遇到左括号开始入栈直到遇到右括号,遇到右括号时对括号内的数 ...

  6. Spring中DispacherServlet、WebApplicationContext、ServletContext的关系

    转载:http://blog.csdn.net/c289054531/article/details/9196149?utm_source=tuicool&utm_medium=referra ...

  7. asp.net MVC webservice 报次错解决方法

    asp.net  MVC  webservice  报次错解决方法: 解决方法: 在 RouteConfig.cs public static void RegisterRoutes(RouteCol ...

  8. C#获取百度新歌TOP50

    先上软件效果图 代码如下1.根据Url地址得到网页的html源码 public static string GetWebContent(string Url) { string strResult = ...

  9. SQL查看一张表中是否存在记录

    今天在QQ群众讨论到一个问题,记录下下来,一边以后用的时候可以翻阅 总结除了三种方法 --方法1,,这一种方法不行,,错误的认识了,@@ROWCOUNT,,,唉,,学艺不精,,丢人啊 SELECT T ...

  10. jQuery函数attr()和prop()的区别，val()

    [自己总结,详情见下面转录的文章]: attr()用于操作html属性,prop()属性用于操作DOM属性 ①: 很多情况下可以互用 ②:attr()独自适用的情况,自定义的html属性,html属性 ...