分享

html+javascript+css简单例子

 昵称10504424 2013-02-28

在同一文件夹里新建action1.js,content1.html和display.css

 

content1.html源代码

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>the tutionJsp index page</title>
<link rel = "stylesheet" type="text/css" href="display.css" />
<style type="text/css">
a {
  padding: 3px 10px;
  margin: 20px 10px;
  text-decoration: none;
  display: block;
  width: 260px;
  border-left: 1px solid #ccc;
  border-right: 2px solid black;
  border-top: 1px solid #ccc;
  border-bottom: 2px solid black;
}

a:hover {
  color: white;
  background-color: #aaa;
}
</style>
<script src="action.js" type="text/javascript"></script>
</head>
<body>
<form method="GET" action="#">
  <table>
      <tr>
      <td><a href="#">INPUT DOLLAR AMOUNT</a></td>
      <td><input id="damount" name="damount" type="text" size="20"/></td>
      <td><input id="confirm" name="confirm" type="submit"/></td>
      </tr>
  </table>
</form>
</body>
</html>

 

action1.js源代码

window.onload = initPage;

function initPage()
{
    var a='11160';
    alert(parseInt(a,2)); //将111做为2进制来转换,忽略60(不符合二进制),从左至右只将符合二进制数的进行转换
    alert(parseInt(a,16)); //将所有的都进行转换

     alert("this is initPage");
     document.getElementById("confirm").onclick = function(evt){alert("the confirm button pressed!");};
     document.getElementById("damount").onblur = blurBamt;
}

function blurBamt()
{
   document.getElementById("damount").className = "ErrFld FontWhite FontYellow";
   alert("THIS is blur bamt !!!".toLowerCase());
   document.getElementById("damount").value = document.getElementById("damount").className;
   var a = 234;
   alert(parseInt(a,10).toString(16).toUpperCase()); //将A转换为10进制,然后再转换成16进制 同样也可以是其它进制
}

 

display1.css源代码

a {
  padding: 3px 10px;
  margin: 20px 10px;
  text-decoration: none;
  display: block;
  width: 260px;
  border-left: 1px solid #ccc;
  border-right: 2px solid black;
  border-top: 1px solid #ccc;
  border-bottom: 2px solid black;
}

a:hover {
  color: white;
  background-color: #aaa;
}

.ErrFld{
  background-color: #FF0000;
}

.FontWhite{
  color: white;
}

.FontYellow{
  color: yellow;
}

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约