数力计分享 http://blog.sciencenet.cn/u/baibing

博文

梦之都

已有 2207 次阅读 2015-1-3 16:21 |系统分类:教学心得

http://www.dreamdu.com/xhtml/css/

   

       html+javascript+css简单例子        

在同一文件夹里新建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</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;
}




https://blog.sciencenet.cn/blog-58025-856097.html

上一篇:二氧化碳(CO2)对砂岩拉破坏的短期效应实验研究
下一篇:鄂尔多斯盆地CO2源、汇和基础设施的系统集成
收藏 IP: 202.127.156.*| 热度|

0

该博文允许注册用户评论 请点击登录 评论 (0 个评论)

数据加载中...
扫一扫,分享此博文

Archiver|手机版|科学网 ( 京ICP备07017567号-12 )

GMT+8, 2024-3-29 18:43

Powered by ScienceNet.cn

Copyright © 2007- 中国科学报社

返回顶部