聪明的绿叶

I am No 11.
posts - 28, comments - 4, trackbacks - 0, articles - 0
   :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

置顶随笔


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
<div align="center"><align=center><TEXTAREA rows='12' cols='78' class='fm' id='code'><br>
--完整的HTML代码放这--
</TEXTAREA></P></div>
<INPUT onclick="runEx('code')" type="button" value="运行代码" style="cursor:hand"onFocus="this.blur()"> 
<input type="button" name="Submit" value="复制到剪贴板" onClick="cycode(code)" style="cursor:hand;width:95px" onFocus="this.blur()"> 
<input type="button" value="另存代码" onclick="svcode(code)" style="cursor:hand" onFocus="this.blur()">
<br>[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]</div>
<script>
function runEx(cod) {
cod
=document.all(cod)
var code=cod.value;
if (code!=""){
var newwin=window.open('','',''); //打开一个窗口并赋给变量newwin。
newwin.opener = null // 防止代码对页面修改
newwin.document.write(code); //向这个打开的窗口中写入代码code,这样就实现了运行代码功能。
newwin.document.close();
}
}
//复制文本域代码
function cycode(obj) {
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand(
"Copy");
window.status
="高亮度包含的代码已被复制到剪贴板!Contents highlighted and copied to clipboard!"
setTimeout(
"window.status=''",1800)
rng.collapse(
false);
}
//另存代码
function svcode(obj) {
var winname = window.open('', '_blank', 'top=10000');
winname.document.open('text
/html', 'replace');
winname.document.writeln(obj.value);
winname.document.execCommand('saveas','','code.htm');
winname.close();
}
</script>

posted @ 2007-12-12 19:00 No.11 绿叶 阅读(153) | 评论 (0)编辑

2008年7月7日

我们定义一个最基本的层:

boxtest

div.boxtest{ 
border:20px   solid #60A179;
padding: 30px;
background :  #ffc;
width : 300px;
}

标准情况下,这个盒的宽度是:20+30+300+30+20=400px。

但是在IE5.0浏览器中,对盒模型的宽度解释有个bug,它认为300 px是整个盒的总宽度,内容的宽度变成:300-20-30-20-30=200px。

为了弥补这个bug,采用一个技巧:即增加一个IE5不能解释的声音属性"voice-family",读到这个定义时浏览器就不再继续阅读,认为宽就是400px,但而其他符合标准的浏览器会继续阅读,并执行第二个真实值300px。

content

div.content{
border:20px solid #60A179;; 
padding:30px;
background: #ffc;
width :400px;
voice-family :   "\"}\"";
voice-family :inherit;
width :  300px;
}

同样,在Opera7.0以前的浏览器也有这样的解析bug。但我们并不需要使用伪值,有更简单的办法解决这个问题:
html>body .content { width :300px; }


From:http://www.w3cn.org/article/tips/2004/90.html

posted @ 2008-07-07 11:33 No.11 绿叶 阅读(112) | 评论 (2)编辑

2008年7月2日

<style>
    #vertgraph 
{                    
        width
: 378px; 
        height
: 207px; 
        position
: relative; 
        background
: url("http://www.ximicc.com/attachments/month_0803/52008310134528.gif") no-repeat; 
    
}

    #vertgraph ul 
{ 
        width
: 378px; 
        height
: 207px; 
        margin
: 0; 
        padding
: 0; 
    
}

    #vertgraph ul li 
{  
        position
: absolute; 
        width
: 28px; 
        height
: 160px; 
        bottom
: 34px; 
        padding
: 0 !important; 
        margin
: 0 !important; 
        background
: url("http://www.ximicc.com/attachments/month_0803/u200831013462.jpg") no-repeat !important;
        text-align
: center; 
        font-weight
: bold; 
        color
: white; 
        line-height
: 2.5em;
    
}


    #vertgraph li.high 
{ left: 24px; background-position: 0px bottom !important; }
    #vertgraph li.low 
{ left: 101px; background-position: -28px bottom !important; }
    #vertgraph li.lower 
{ left: 176px; background-position: -56px bottom !important; }
    #vertgraph li.medium 
{ left: 251px; background-position: -84px bottom !important; }
    #vertgraph li.info 
{ left: 327px; background-position: -112px bottom !important; }
</style>
<div id="vertgraph">
    
<ul>
        
<li class="high" style="height: 160px;">16</li>
        
<li class="low" style="height: 70px;">7</li>
        
<li class="lower" style="height: 30px;">3</li>
        
<li class="medium" style="height: 80px;">8</li>
        
<li class="info" style="height: 20px;">2</li>
    
</ul>
</div>

原文来自:http://www.ximicc.com/article.asp?id=77

posted @ 2008-07-02 13:39 No.11 绿叶 阅读(14) | 评论 (0)编辑

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>树型列表的实现</title>
<style type="text/css">
<!--
ul.tree, ul.tree ul 
{
     list-style-type
: none;
   
}

      ul.tree, ul.tree ul 
{
     list-style-type
: none;
     background
: url(http://www.ximicc.com/attachments/month_0803/42008320133339.jpg) repeat-y;
     margin
: 0;
     padding
: 0;
   
}

   
   ul.tree ul 
{
     margin-left
: 10px;
   
}


   ul.tree li 
{
     margin
: 0;
     padding
: 0 12px;
   
}

      ul.tree, ul.tree ul 
{
     list-style-type
: none;
     background
: url(http://www.ximicc.com/attachments/month_0803/42008320133339.jpg) repeat-y;
     margin
: 0;
     padding
: 0;
   
}

   
   ul.tree ul 
{
     margin-left
: 10px;
   
}


   ul.tree li 
{
     margin
: 0;
     padding
: 0 12px;
     line-height
: 20px;
     background
: url(http://www.ximicc.com/attachments/month_0803/n200832013377.jpg) no-repeat;
     color
: #369;
     font-weight
: bold;
   
}

      ul.tree li.last 
{
     background
: #fff url(http://www.ximicc.com/attachments/month_0803/0200832013458.jpg) no-repeat;
   
}

-->
</style>
</head>

<body>
   
<ul class="tree">
    
<li>Animals
     
<ul>
      
<li>Birds</li>
      
<li>Mammals
       
<ul>
        
<li>Elephant</li>
        
<li class="last">Mouse</li>
       
</ul>
      
</li>
      
<li class="last">Reptiles</li>
     
</ul>
    
</li>
    
<li class="last">Plants
     
<ul>
      
<li>Flowers
       
<ul>
        
<li>Rose</li>
        
<li class="last">Tulip</li>
       
</ul>
      
</li>
      
<li class="last">Trees</li>
     
</ul>
    
</li>
   
</ul>
</body>
</html>

原文来自:http://www.ximicc.com/article.asp?id=87

posted @ 2008-07-02 13:36 No.11 绿叶 阅读(25) | 评论 (0)编辑

<style>
    dl 
{ 
        margin
: 0; 
        padding
: 0;                     
    
}
    dt 
{ 
        position
: relative; /* IE is dumb */
        clear
: both;
        display
: block; 
        float
: left; 
        width
: 104px; 
        height
: 20px; 
        line-height
: 20px;
        margin-right
: 17px;              
        font-size
: .75em; 
        text-align
: right; 
    
}
    dd 
{ 
        position
: relative; /* IE is dumb */
        display
: block;                 
        float
: left;     
        width
: 197px; 
        height
: 20px; 
        margin
: 0 0 15px; 
        background
: url("http://www.cnblogs.com/images/cnblogs_com/youth0826/143133/r_03.jpg"); 
     
}
     * html dd 
{ float: none; } 
    
/* IE is dumb; Quick IE hack, apply favorite filter methods for 
    wider browser compatibility 
*/

     dd div 
{ 
        position
: relative; 
        background
: url("http://www.cnblogs.com/images/cnblogs_com/youth0826/143133/r_04.jpg"); 
        height
: 20px; 
        text-align
:right; 
     
}
     dd div strong 
{ 
        position
: absolute; 
        right
: -5px; 
        top
: -2px; 
        display
: block; 
        background
: url("http://www.cnblogs.com/images/cnblogs_com/youth0826/143133/r_05.gif"); 
        height
: 24px; 
        width
: 9px; 
        text-align
: left;
        text-indent
: -9999px; 
        overflow
: hidden;
     
}
</style>
<dl>
    
<dt>Spring</dt>
    
<dd>
        
<div style="width:5%;"><strong>5%</strong></div>
    
</dd>
    
<dt>Ximicc</dt>
    
<dd>
        
<div style="width:55%;"><strong>55%</strong></div>
    
</dd>
    
<dt>Technique</dt>
    
<dd>
        
<div style="width:75%;"><strong>75%</strong></div>
    
</dd>
</dl>
引用自:http://www.blueidea.com/tech/web/2008/5924_2.asp

posted @ 2008-07-02 11:09 No.11 绿叶 阅读(121) | 评论 (0)编辑

2008年7月1日

1、获取服务器端当前日期

Date myDate = new Date();


2、获取当前年、月、日:

Date myDate = new Date();
int thisYear = myDate.getYear() + 1900;//thisYear = 2003
int thisMonth = myDate.getMonth() + 1;//thisMonth = 5
int thisDate = myDate.getDate();//thisDate = 30


3、按本地时区输出当前日期

Date myDate = new Date();
out.println(myDate.toLocaleString());

输出结果为:
2003-5-30

4、获取数据库中字段名为”publish_time“、类型为Datetime的值

Date sDate = rs.getDate("publish_time");

 

5、按照指定格式打印日期

Date dNow = new Date();
SimpleDateFormat formatter 
= new SimpleDateFormat("E yyyy.MM.dd 'at' hh:mm:ss a zzz");
out.println(
"It is " + formatter.format(dNow));

输出的结果为:
It is 星期五 2003.05.30 at 11:30:46 上午 CST
(更为详尽的格式符号请参看SimpleDateFormat类)

6、将字符串转换为日期

 String input = "1222-11-11";
SimpleDateFormat formatter 
= new SimpleDateFormat("yyyy-MM-dd");
Date t 
= null;
try{
= formatter.parse(input);
out.println(t);
}
catch(ParseException e){
out.println(
"unparseable using " + formatter);
}

输出结果为:
Fri Nov 11 00:00:00 CST 1222

7、计算日期之间的间隔

String input = "2003-05-01";
SimpleDateFormat formatter 
= new SimpleDateFormat("yyyy-MM-dd");
Date d1 
= null;
try{
d1 
= formatter.parse(input);
}
catch(ParseException e){
out.println(
"unparseable using " + formatter);
}

Date d2 
= new Date();

long diff = d2.getTime() - d1.getTime();
out.println(
"Difference is " + (diff/(1000*60*60*24)) + " days.");

输出结果为:
Difference is 29 days.

8、日期的加减运算
方法:用Calendar类的add()方法

Calendar now = Calendar.getInstance();
SimpleDateFormat formatter 
= new SimpleDateFormat("E yyyy.MM.dd 'at' hh:mm:ss a zzz");
out.println(
"It is now " + formatter.format(now.getTime()));
now.add(Calendar.DAY_OF_YEAR,
-(365*2));
out.println(
"<br>");
out.println(
"Two years ago was " + formatter.format(now.getTime()));

输出结果为:
It is now 星期五 2003.05.30 at 01:45:32 下午 CST
Two years ago was 星期三 2001.05.30 at 01:45:32 下午 CST

9、比较日期
方法:用equals()、before()、after()方法

DateFormat df = new SimpleDateFormat("yyy-MM-dd");
Date d1 
= df.parse("2000-01-01");
Date d2 
= df.parse("1999-12-31");

String relation 
= null;
if(d1.equals(d2))
relation 
= "the same date as";
else if(d1.before(d2))
relation 
= "before";
else
relation 
= "after";
out.println(d1 
+" is " + relation + ' ' + d2);

输出结果为:
Sat Jan 01 00:00:00 CST 2000 is after Fri Dec 31 00:00:00 CST 1999

10、记录一件事所花费的时间
方法:调用两次System.getTimeMillis()方法,求差值

long t0,t1;
t0 
= System.currentTimeMillis();
out.println(
"Cyc starts at " + t0);
int k = 0;
for(int i =0;i<100000;i++){
+= i;
}
t1 
= System.currentTimeMillis();
out.println(
"<br>");
out.println(
"Cyc ends at " + t1);
out.println(
"<br>");
out.println(
"This run took " + (t1-t0) + "ms.");

输出结果为:
Cyc starts at 1054275312432
Cyc ends at 1054275312442
This run took 10ms.

其它:如何格式化小数

DecimalFormat df = new DecimalFormat(",###.00");
double aNumber = 33665448856.6568975;
String result 
= df.format(aNumber);
out.println(result);

输出结果为:
33,665,448,856.66

posted @ 2008-07-01 20:33 No.11 绿叶 阅读(25) | 评论 (0)编辑