Archive for javascript and CSS

JavaScript与ActionScript3交互

// January 24th, 2010 // No Comments » // AS3知识积累, javascript and CSS

TestData.as

package {
import flash.display.Sprite;
import flash.events.TimerEvent;
import flash.text.TextField;
import flash.utils.Timer;
import flash.external.ExternalInterface;

public class TestDate extends Sprite
{

private var i:int=0;
private var timer:Timer=new Timer(1000,60);

internal var jsReady:Boolean;
internal var aa:String =”hi”;
private var output:TextField=new TextField();
public function TestDate()
{
this.addChild(this.output);
this.timer.addEventListener(TimerEvent.TIMER,timerHandler);
this.timer.start();
this.output.appendText(‘开始时间’+”\n”);
this.output.autoSize=’12px’;

}

private function timerHandler(event:TimerEvent):void{

jsReady = new Boolean(ExternalInterface.call(“JSReady”,aa));
this.output.appendText(“runing:”+(i++)+”\n”);
if(jsReady){
ExternalInterface.addCallback(“sayHello”,sayHello);
ExternalInterface.call(“setSwfReady”,true);
if(ExternalInterface.available)ExternalInterface.call(“callAS”,”");
this.timer.stop();
}
}

public function sayHello(txt:String):void{
this.output.appendText(“JS： “+txt+”\n”);
}
}
}

javascript

<script language="JavaScript" type="text/javascript">
var jsReady=false;
var swfReady=false;
function atReady(){
jsReady=true;
}

function JSReady(){
return jsReady;
}
function setSwfReady(ready){
swfReady=ready;
}

function callAS(){
if(swfReady){
TestDate.sayHello(“Hello,World”);
}
}

function show(str){
document.getElementById(“show”).innerHTML=”test:”+str;
}

</script>

[整理] 页面跳转代码

// January 14th, 2010 // No Comments » // PHP基础知识累积, javascript and CSS

这年头，真是好记性不如烂笔头。学的快，忘的快。刚才工作中要用到页面跳转，却又记不清楚了。
故特意整理了一下，用做以后参考。
第一篇: JavaScript 跳转
方法一:
<script language=”javascript”>
window.location = “http://www.baidu.com”;
</script>
方法二:
<script language=”javascript”>
document.location = “http://www.baidu.com”;
</script>
方法三： （带进度条）
<html>
<head>
<meta http-equiv=”Content-Language” content=”zh-cn”>
<meta HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=gb2312″>
<title>跳转到baidu.com</title>
</head>
<body>
<form name=loading>
<P align=center><FONT face=Arial color=#0066ff size=2>loading…</FONT>
<INPUT style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bolder; PADDING-BOTTOM: 0px; COLOR: #0066ff; BORDER-TOP-style: none; PADDING-TOP: 0px; FONT-FAMILY: Arial; BORDER-RIGHT-style: none; BORDER-LEFT-style: none; BACKGROUND-COLOR: white; BORDER-BOTTOM-style: none”
size=46 name=chart>
<BR>
<INPUT style=”BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; COLOR: #0066ff; BORDER-BOTTOM: medium none; TEXT-ALIGN: center” size=47 name=percent>
<script language=”javascript”>
var bar=0
var line=”||”
var amount=”||”
count()
function count(){
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+”%”
if (bar<99){
setTimeout(“count()”,100);
}else{
window.location = “http://www.baidu.com/”;
}
}
</script>
</P>
</form>
</body>
</html>
第二篇: 页面跳转
<head>
<meta http-equiv=”refresh” content=”10; url=http://www.baidu.com”>
</head>
第三篇: 动态页面跳转
方法一: PHP 跳转
<?php
header(“location: http://www.baidu.com”);
?>
方法二: ASP 跳转
<%
response.redirect “http://www.baidu.com”
%>
FYI:
<%
Dim ID1
Dim ID2
dim str
ID1 = Request(“forumID”)
ID2 = Request(“threadID”)
str=”/blog/threadview.asp?forumID=”& ID1 &”&threadID=” & ID2
response.redirect str
%>

这年头，真是好记性不如烂笔头。学的快，忘的快。刚才工作中要用到页面跳转，却又记不清楚了。
故特意整理了一下，用做以后参考。
第一篇: JavaScript 跳转
方法一:
<script language=”javascript”>    window.location = “http://www.baidu.com”;</script>
方法二:
<script language=”javascript”>    document.location = “http://www.baidu.com”;</script>
方法三： （带进度条）
<html><head><meta http-equiv=”Content-Language” content=”zh-cn”><meta HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=gb2312″><title>跳转到baidu.com</title></head><body><form name=loading><P align=center><FONT face=Arial color=#0066ff size=2>loading…</FONT><INPUT style=”PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-WEIGHT: bolder; PADDING-BOTTOM: 0px; COLOR: #0066ff; BORDER-TOP-style: none; PADDING-TOP: 0px; FONT-FAMILY: Arial; BORDER-RIGHT-style: none; BORDER-LEFT-style: none; BACKGROUND-COLOR: white; BORDER-BOTTOM-style: none”size=46 name=chart><BR><INPUT style=”BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; COLOR: #0066ff; BORDER-BOTTOM: medium none; TEXT-ALIGN: center” size=47 name=percent><script language=”javascript”>var bar=0var line=”||”var amount=”||”count()function count(){    bar=bar+2    amount =amount + line    document.loading.chart.value=amount    document.loading.percent.value=bar+”%”    if (bar<99){        setTimeout(“count()”,100);    }else{        window.location = “http://www.baidu.com/”;    }}</script></P></form></body></html>
第二篇: 页面跳转
<head><meta http-equiv=”refresh” content=”10; url=http://www.baidu.com”></head>
第三篇: 动态页面跳转
方法一: PHP 跳转
<?phpheader(“location: http://www.baidu.com”);?>
方法二: ASP 跳转
<%response.redirect “http://www.baidu.com”%>
FYI:<%Dim ID1Dim ID2dim strID1 = Request(“forumID”)ID2 = Request(“threadID”)str=”/blog/threadview.asp?forumID=”& ID1 &”&threadID=” & ID2response.redirect str%>

简单实用的javascript的windows.confirm()类型的确认对话框

// January 14th, 2010 // No Comments » // javascript and CSS

<a   href=”#”   onclick=”return   confirm(‘删除?’);”>删除</a>

限制输入汉字和全角数字的CSS

// November 3rd, 2008 // No Comments » // javascript and CSS

<input type=”text” id=”payment”  value=”0″ name=”payment”  style=”ime-mode:Disabled” ondragenter=”return false” />

去掉普通连接或者图片连接旁边的虚线css

// June 9th, 2008 // No Comments » // javascript and CSS

/* CSS Document */
a { outline:none; }
text-decoration:none;

IE下让网站变成灰色调

// June 3rd, 2008 // No Comments » // javascript and CSS

19-21全国3天哀悼日，各大网站纷纷披上了灰色调，来表达我们沉重的心情。这里有个方法可以迅速把你的网站变成灰调，就是给body加个css滤镜。
body {filter:gray;}
既然说了是css滤镜，那么只能是在IE下支持了。firefox下浏览照样还是彩色的。并且有一点，flash里的图片不会变灰。

div li 表格应用

// June 1st, 2008 // No Comments » // javascript and CSS

<html>
<head>
<style>
<!–
#table {
clear:none;
width:300px;
border-top:1px #000 solid;
}
#table ul {
clear:left;
margin:0px;
padding:0px;
width:301px;
list-style-type:none;
border-bottom:1px #000 solid;
border-left:1px #000 solid;
}
#table li {
float:left;
display:block;
margin:0px;
padding:0px;
border-right:1px #000 solid;
width:60px;
}
–>
</style>
</head>
<body>
<div id=”table”>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>456</li>
</ul>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>def</li>
</ul>
<ul>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>DEF</li>
</ul>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>456</li>
</ul>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>def</li>
</ul>
<ul>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>ABC</li>
<li>DEF</li>
</ul>
<ul>
<li>123</li>
<li>123</li>
<li>123</li>
<li>123</li>
<li>456</li>
</ul>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>def</li>
</ul>
</div>
</body>
</html>

如何让Div中的内容对齐底部或者垂直居中

// June 1st, 2008 // No Comments » // javascript and CSS

底端对齐

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”zh-CN”>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<style type=”text/css” media=”all”>
div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content div{position: absolute;left: 0;bottom: 0;}
</style>
</head>
<body>
<div id=”content”>
<div>底端对齐<br />
<img src=”http://bbs.51js.com/images/default/logo.gif” _fcksavedurl=”http://bbs.51js.com/images/default/logo.gif” alt=”无忧脚本logo” title=”无忧脚本logo” /></div>
</div>
</body>
</html>

垂直居中

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”zh-CN”>
<head>
<title></title>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<style type=”text/css” media=”all”>
div,img{margin: 0;padding: 0;border: 0;}#content{width: 303px;height: 404px;background: #F63;color: #000;font: 12px Arial,Helvetica,sans-serif;position: relative;}#content[id]{display: table;position: static;}#middle{position: absolute;left: 0;top: 50%;}#middle[id]{display: table-cell;vertical-align: middle;position: static;}#inner{position: relative;left: 0;top: -50%;}
</style>
</head>
<body>
<div id=”content”>
<div id=”middle”>
<div id=”inner”>垂直居中<br />
<img src=”http://bbs.51js.com/images/default/logo.gif” _fcksavedurl=”http://bbs.51js.com/images/default/logo.gif” alt=”无忧脚本logo” title=”无忧脚本logo” /></div>
</div>
</div>
</body>
</html>

CSS中float引起层飘出上级层的解决

// June 1st, 2008 // No Comments » // javascript and CSS

刚学css div布局，总会遇到很多浏览器兼容的问题，这个问题困扰了一段时间，只到看了精通css才看到几个解决办法。

1.加clear空div

.clearfix:after {
content: “.”; display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}/* End hide from IE-mac */
.clearfix {
display: block;
margin: 0px;
clear: both;
padding: 0px;
visibility: hidden;
background-color:#666666;
border:0px none #FFFFFF;
}
.clearfix:after { height: 1px;}

使用方法：
在所有浮动层之后加上这个层
<div class=”clearfix”></div>

2.把背景层加浮动，但是这个方法会影响其他的div，有时候好用。

3.加 overlow 这个也有问题，会影响div的外观。

总之 希望以后的以后只有一种浏览器…

div最小高度

// May 30th, 2008 // No Comments » // javascript and CSS

IE6中的div默认有个最小字体高度，div的最小高度就是这个高度，除非你改变这个字体的大小。这样来加：

.style1{height:1px;font-size:0;}

刚开始div+css总会遇到很多类似这样的问题。。。 无语

容器不扩展问题

// May 30th, 2008 // No Comments » // javascript and CSS

遇到这样的问题，只需要在容器的最末处加一个clear的div容器

  1. .clear{</br>font:0px/0px sans-sreif;clear:both;display:block;}

CSS中position的absolute和relative

// May 30th, 2008 // No Comments » // javascript and CSS

级的定位。
默认的属性值都是static，静态。最关键的是relative（相对）以及absolute（绝对）。
只要把其上一级的样式属性position设置为relative就可以了。

<div id=”A”>
<div id=”B”>
</div>
</div>

当A的position为relative时，B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档，而是针对id为A的这个div了。

收集的非常不错的js脚本

// May 9th, 2008 // No Comments » // javascript and CSS

1 >屏蔽功能类

1.1 屏蔽键盘所有键 (more…)

完美关闭窗口JS

// May 9th, 2008 // No Comments » // javascript and CSS

<html>
<head> (more…)

机器没有安装flash插件时候，显示别的页面

// April 29th, 2008 // No Comments » // javascript and CSS

  1. <SCRIPT LANGUAGE=JavaScript1.1>
  2. <!--
  3. var MM_contentVersion = 9;
  4. var plugin = (navigator.mimeTypes && navigator.mimeTypes["application/x-shockwave-flash"]) ? navigator.mimeTypes["application/x-shockwave-flash"].enabledPlugin : 0;
  5. if ( plugin ) {
  6. var words = navigator.plugins["Shockwave Flash"].description.split(" ");
  7.     for (var i = 0; i < words.length; ++i)
  8.     {
  9. if (isNaN(parseInt(words[i])))
  10. continue;
  11. var MM_PluginVersion = words[i];
  12.     }
  13. var MM_FlashCanPlay = MM_PluginVersion >= MM_contentVersion;
  14. }
  15. else if (navigator.userAgent && navigator.userAgent.indexOf("MSIE")>=0
  16.    && (navigator.appVersion.indexOf("Win") != -1)) {
  17. document.write('<SCR' + 'IPT LANGUAGE=VBScript\> \n'); //FS hide this from IE4.5 Mac by splitting the tag
  18. document.write('on error resume next \n');
  19. document.write('MM_FlashCanPlay = ( IsObject(CreateObject("ShockwaveFlash.ShockwaveFlash." & MM_contentVersion)))\n');
  20. document.write('</SCR' + 'IPT\> \n');
  21. }
  22. if ( MM_FlashCanPlay ) {
  23. window.location.replace("http://blog.e-snowlife.com");
  24. }
  25. //-->
  26.  
  27. </SCRIPT>

.js外部文件编辑[13] Flash对应IE变更

// April 22nd, 2008 // No Comments » // Flex积累, javascript and CSS

writeFlashHTML2() (more...)

Div+css菜单：一张图片实现翻转效果

// December 13th, 2007 // No Comments » // javascript and CSS

传统的方法制作这个翻转图效果的菜单，要把图片切成10块，还要加上JS鼠标交互效果的代码。现在完全用CSS来实现，图片只要一张即可以达到效果。

(more…)