代码改变世界

window.open代码生成器

2012-09-25 20:16  苏飞  阅读(1390)  评论(0)  编辑  收藏  举报

window.open是JS中比如常用的方法。在此提供一个在线代码生成器欢迎大家使用.
网址，在线测试地址：tool.cckan.net/index.html 
效果如下：

html代码与JS代码如下所示

View Code 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>window.open代码生成器|window.open在线代码生成器|window.open参数生成器|open代码生成器|window.open - C#传传看</title>
    <link rel="stylesheet" type="text/css" href="tool_open_files/toolsite.css">

    <script type="text/javascript">
        var temp;
        function S_Code() {
            var address = document.form1.url.value;
            var op_tool = (document.form1.tool.checked == true) ? "toolbar=1," : "";
            var op_loc = (document.form1.loc.checked == true) ? "location=1," : "";
            var op_link = (document.form1.link.checked == true) ? "directories==1," : "";
            var op_stat = (document.form1.stat.checked == true) ? "status=1," : "";
            var op_menu = (document.form1.menu.checked == true) ? "menubar=1," : "";
            var op_scroll = (document.form1.scroll.checked == true) ? "scrollbars=1," : "";
            var op_resize = (document.form1.resize.checked == true) ? "resizable=1," : "";
            var op_selfopen = (document.form1.selfopen.checked == true) ? "_self" : "newwindow";
            var op_width = (document.form1.width.value != "") ? "width=" + document.form1.width.value + "," : "";
            var op_heigh = (document.form1.heigh.value != "") ? "heigh=" + document.form1.heigh.value + "," : "";
            var op_L = (document.form1.L.value) ? "left=" + document.form1.L.value + "," : "";
            var op_T = (document.form1.T.value) ? "top=" + document.form1.T.value + "," : "";
            if (op_tool == "" && op_loc == "" && op_link == "" && op_stat == "" && op_menu == "" && op_scroll == "" && op_resize == "" && op_width == "" && op_heigh == "" && op_L == "" && op_T == "") {
                tempopenstyle = "";
            } else {
                tempopenstyle = ",'" + op_width + op_heigh + op_L + op_T + op_tool + op_loc + op_link + op_stat + op_menu + op_scroll + op_resize;
                tempopenstyle = tempopenstyle.substring(0, tempopenstyle.length - 1);
                tempopenstyle = tempopenstyle + "'";
            }
            temp = "window.open('" + address + "','" + op_selfopen + "'" + tempopenstyle + ")"
        }
    </script>
</head>
<body style="text-align: left">
    <div style="padding: 25px 5px 5px;" align="center">
                      window.open在线生成器
        <table border="0" cellspacing="0" cellpadding="0" width="760" bgcolor="#cccccc" align="center">
            <tbody>
                <tr>
                    <td bgcolor="#ffffff" valign="middle" align="center">
                        <form method="post" name="form1">
                        <table border="0" cellspacing="0" cellpadding="0" width="100%">
                            <tbody>
                                <tr>
                                    <td height="280" valign="top" width="747" align="center">
                                        <table border="0" cellspacing="1" cellpadding="0" width="100%" bgcolor="#cccccc"
                                            align="center">
                                            <tbody>
                                                <tr bgcolor="#f0f0f0">
                                                    <td bgcolor="#ffffff" colspan="6">
                                                        <div style="margin-top: 5px;" align="left">
                                                            &nbsp;URL:
                                                            <input class="input" name="url" value="http://" size="54" /></div>
                                                    </td>
                                                </tr>
                                                <tr bgcolor="#f0f0f0">
                                                    <td bgcolor="#ffffff">
                                                        <input name="tool" value="ON" type="checkbox" />快捷键
                                                    </td>
                                                    <td bgcolor="#ffffff">
                                                        <input name="loc" value="ON" type="checkbox" />地址栏
                                                    </td>
                                                    <td bgcolor="#ffffff">
                                                        <input name="link" value="ON" type="checkbox" />链 接
                                                    </td>
                                                    <td bgcolor="#ffffff">
                                                        <input name="stat" value="ON" type="checkbox" />状态栏
                                                    </td>
                                                    <td bgcolor="#ffffff">
                                                        <input name="resize" value="ON" type="checkbox" />调大小
                                                    </td>
                                                    <td bgcolor="#ffffff">
                                                        <input name="scroll" value="ON" type="checkbox" />滚动条
                                                    </td>
                                                </tr>
                                                <tr bgcolor="#f0f0f0">
                                                    <td bgcolor="#ffffff">
                                                        <input name="menu" value="ON" type="checkbox" />菜 单
                                                    </td>
                                                    <td bgcolor="#ffffff">
                                                        <input name="selfopen" value="ON" type="checkbox" />在本窗口打开
                                                    </td>
                                                    <td bgcolor="#ffffff" colspan="2">
                                                        &nbsp;左边距:
                                                        <input name="L" size="10" />
                                                        &nbsp;顶部距离:<input name="T" size="10" />
                                                    </td>
                                                    <td bgcolor="#ffffff" colspan="2">
                                                        &nbsp;宽:<input name="width" size="10" />
                                                        &nbsp;高:<input name="heigh" size="10" />
                                                    </td>
                                                </tr>
                                                <tr bgcolor="#f0f0f0">
                                                    <td bgcolor="#ffffff" valign="middle" colspan="6" align="center">
                                                        <div style="margin-top: 5px;">
                                                            <input class="but2" onclick="S_Code();eval(temp)" name="button" value="测 试" type="button" /><input
                                                                class="but2" onclick="S_Code();document.form1.showcode.value=temp;" name="Button"
                                                                value="生成代码" type="button" /></div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                        <textarea id="showcode" cols="145" rows="14" name="textarea"></textarea>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        </form>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Css样式

View Code 
body {
    background: url("../images/bg.gif") repeat-x scroll 0 0 #F0F7FC;
    color: #333333;
    font: 13px/16px Verdana,Tahoma,Arial,Helvetica,sans-serif;
    margin: 0;
    padding: 0;
    text-align: left;
}
* html body {
    font-size: 12px;
}
td {
    color: #333333;
    line-height: 16px;
}
input {
    color: #333333;
    line-height: 16px;
}
textarea {
    color: #333333;
    line-height: 16px;
}
select {
    color: #333333;
    line-height: 16px;
}
button {
    color: #333333;
    line-height: 16px;
}
input {
    vertical-align: middle;
}
textarea {
    vertical-align: middle;
}
select {
    vertical-align: middle;
}
button {
    vertical-align: middle;
}
ul {
    margin: 0;
    padding: 0;
}
ol {
    margin: 0;
    padding: 0;
}
li {
    margin: 0;
    padding: 0;
}
dl {
    margin: 0;
    padding: 0;
}
dd {
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
}
h1 {
    margin: 0;
    padding: 0;
}
h2 {
    margin: 0;
    padding: 0;
}
h3 {
    margin: 0;
    padding: 0;
}
h4 {
    margin: 0;
    padding: 0;
}
h5 {
    margin: 0;
    padding: 0;
}
h6 {
    margin: 0;
    padding: 0;
}
form {
    margin: 0;
    padding: 0;
}
fieldset {
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 1em;
}
h2 {
    font-size: 1em;
}
h3 {
    font-size: 1em;
}
h4 {
    font-size: 1em;
}
h5 {
    font-size: 1em;
}
h6 {
    font-size: 1em;
}
ul {
    list-style: none outside none;
}
ol {
    list-style: none outside none;
}
img {
    border: 0 none currentcolor;
    vertical-align: middle;
}
a {
    color: #0D8C21;
    text-decoration: none;
}
a:hover {
    color: red;
    text-decoration: underline;
}
select {
    font-size: 15px;
}
.blue {
    color: #3333FF;
}
.box h1 {
    background: url("../images/h1-bg.gif") repeat-x scroll 0 0 transparent;
    border-color: #C5E2F2 #C5E2F2 currentcolor;
    border-style: solid solid none;
    border-width: 1px 1px 0;
    color: #0066CC;
    font-size: 14px;
    font-weight: normal;
    height: 37px;
    line-height: 37px;
    padding-left: 20px;
}
.box h1 span {
    background: url("../images/h1.gif") no-repeat scroll right center transparent;
    float: right;
    font-weight: normal;
    padding: 10px 12px 0 0;
}
.box h1 a {
    color: #3333FF;
}
.box .titright {
    float: right;
    padding-right: 10px;
}
.box .titleft {
    float: left;
}
.clear {
    clear: both;
    font-size: 0;
    height: 10px;
    line-height: 0;
}
.input {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #94C6E1;
    color: #22AC38;
    font-weight: bold;
    margin-bottom: 5px;
    padding: 5px;
}
.input {
    font-size: 13px;
}
.but {
    background: url("../images/but.gif") repeat-x scroll 50% top #CDE4F2;
    border: 1px solid #C5E2F2;
    cursor: pointer;
    height: 30px;
    margin-bottom: 5px;
    margin-left: 5px;
    width: 90px;
}
.but2 {
    background: url("../images/but.gif") repeat-x scroll 50% top #CDE4F2;
    border: 1px solid #C5E2F2;
    cursor: pointer;
    height: 30px;
    margin-bottom: 5px;
    margin-left: 5px;
    width: 90px;
}
.but3 {
    background: url("../images/but.gif") repeat-x scroll 50% top #CDE4F2;
    border: 1px solid #C5E2F2;
    cursor: pointer;
    height: 30px;
    margin-bottom: 5px;
    margin-left: 5px;
    width: 50px;
}
.but4 {
    background: url("../images/but.gif") repeat-x scroll 50% top #CDE4F2;
    border: 1px solid #C5E2F2;
    cursor: pointer;
    height: 30px;
    margin-bottom: 5px;
    margin-left: 5px;
    width: 120px;
}
.input1 {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #7F9DB9;
    color: #333333;
    font-weight: bold;
    margin-bottom: 5px;
    padding: 3px 5px;
}
.but1 {
    background: none repeat scroll 0 0 #F0F7FD;
    border: 1px solid #7F9DB9;
    cursor: pointer;
    height: 23px;
    margin-bottom: 5px;
    margin-left: 5px;
    overflow: visible;
    padding: 0 15px;
}
.wrap {
    clear: both;
    margin: auto;
    width: 900px;
}
.top-nav {
    color: #DDDDDD;
    height: 30px;
    line-height: 30px;
    margin: auto;
}
* html .topnav {
    position: relative;
    z-index: 1;
}
.top-menu {
    color: #DDDDDD;
    float: left;
    height: 30px;
    line-height: 30px;
    margin: auto;
    padding-right: 18px;
}
.top-menu a {
    color: #555555;
}
.top-menu a:hover {
    color: #22AC38;
}
.top-nav-logo {
    color: black;
    float: right;
    height: 30px;
    line-height: 30px;
    margin: auto;
}
.top-nav-logo a {
    color: #3333FF;
}
.top-nav-logo a:hover {
    color: red;
}
.logolink {
    cursor: pointer;
    height: 68px;
    left: 3px;
    position: relative;
    top: 3px;
    width: 220px;
}
.top {
    background: url("../images/logo.gif") no-repeat scroll left center transparent;
    height: 73px;
    position: relative;
}
.topbanner {
    float: left;
    left: 230px;
    position: absolute;
    top: 8px;
}
.banneright {
    float: right;
    position: absolute;
    right: 0;
    top: 8px;
    width: 202px;
}
.banneright ul {
    background-color: #F0F7FD;
    border: 1px solid #B2B2B2;
    height: 55px;
    margin-left: 5px;
    padding: 3px 3px 0 4px;
}
.banneright a {
    color: black;
    font-size: 12px;
}
.banneright ul li {
    height: 19px;
    list-style: none outside none;
}
.top-menu {
    margin-top: 3px;
}
#chinaz_topbar {
    margin-top: 3px;
}
.menu {
    background: url("../images/menu-bg.gif") repeat-x scroll left center transparent;
    height: 45px;
    line-height: 42px;
    margin: auto auto 1px;
    padding-left: 40px;
    text-align: center;
}
.menu a {
    color: #FFFFFF;
    display: block;
    float: left;
    padding: 0 10px;
}
.menu a:hover {
    color: #F39800;
}
.menu .select {
    background: url("../images/s-menu-bg.gif") repeat-x scroll right top transparent;
    padding-right: 15px;
}
div.menu {
}
div.menu-list {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D6D6D6;
    display: none;
    padding: 0 0 5px;
    position: absolute;
    width: 100px;
}
div.menu-list ul li {
    list-style-type: none;
    margin: 5px 2px 0;
    padding: 0;
}
div.menu-list ul li a {
    color: #000000;
    cursor: pointer;
    display: block;
    height: 25px;
    line-height: 25px;
    text-align: center;
    text-decoration: none;
    width: 100%;
}
div.menu-list ul li a span {
    display: block;
    height: 100%;
    width: 100%;
}
div.menu-list ul li a:hover {
    background: url("../images/bg-left.jpg") no-repeat scroll 0 0 #5D98D4;
    color: #FFFFFF;
}
div.menu-list ul li a:hover span {
    background: url("../images/bg-right.jpg") no-repeat scroll right top transparent;
}
.bot-nav {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #BBD7E6;
    clear: both;
    color: #DDDDDD;
    line-height: 32px;
    text-align: center;
}
.bot-nav a {
    color: #3333FF;
}
.foot {
    clear: both;
    color: #888888;
    height: 40px;
    padding: 10px 0;
    text-align: center;
}
.foot a {
    color: #3333FF;
}
.col {
    float: left;
    margin-right: 10px;
    width: 445px;
}
.col2 {
    float: left;
    width: 445px;
}
.box {
    clear: both;
}
.box1 {
    background: url("../images/box1-bg.gif") repeat-x scroll left top #FFFFFF;
    border-color: currentcolor #BBD7E6 #BBD7E6;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    line-height: 30px;
    padding: 3px 15px;
}
.info {
    color: #777777;
    display: block;
    line-height: 18px;
    padding-top: 5px;
}
.info1 {
    color: #777777;
    display: block;
    line-height: 26px;
    padding: 5px 0;
}
.info1 .btnname {
    padding: 5px 0 0 6px;
}
.info1 .taclass {
    border: 1px solid #C5E2F2;
    height: 100px;
    overflow: visible;
    resize: none;
    width: 850px;
}
.toolist {
    border-bottom: 1px solid #E5EFF8;
    clear: both;
}
.toolist li {
    float: left;
    height: 22px;
    line-height: 22px;
    list-style: none outside none;
    padding: 3px 5px;
}
.toolist .imt {
    color: #3333FF;
}
.info2 {
    color: green;
    display: block;
    line-height: 25px;
    padding-right: 8px;
}
.info2 p {
    font-size: 13px;
    line-height: 22px;
    margin-bottom: 10px;
    text-indent: 24px;
}
.info3 {
    border-bottom: 1px solid #E5EFF8;
    color: #333333;
    display: block;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding-bottom: 5px;
}
.favurl {
    background-position: 0 1px;
    background-repeat: no-repeat;
    padding-left: 20px;
}
.favurl {
    display: inline-block;
    padding: 0;
    text-indent: 20px;
}
.red {
    color: #EA5F00;
}
.small {
    font-size: 11px;
}
.seo {
    background-color: #B2B2B2;
    border: 0 none currentcolor;
    text-align: center;
    width: 100%;
}
.seo_head {
    background-color: #D4E6F7;
    text-align: center;
}
.tracert_head {
    background-color: #D4E6F7;
    text-align: center;
}
.seo_item {
    background-color: #FFFFFF;
    text-align: center;
}
.infrm {
    margin-left: -70px !important;
    padding: 0;
}
.pr {
    color: #137258;
    font: 11px Arial,Helvetica,sans-serif;
    height: 14px;
    margin-top: 4px;
}
.pr span {
    background-image: url("../images/seos/Ranks/prbar.gif");
    background-repeat: no-repeat;
    float: left;
    height: 11px;
    padding: 2px;
    width: 69px;
}
.pr img {
    margin-bottom: 6px;
}
.div_robot {
    border: 1px solid #C5E2F2;
    height: 350px;
    overflow: auto;
    padding-left: 10px;
    width: 800px;
}
.Ptd {
    color: #336699;
    width: 25%;
}
.Pspan {
    color: #336699;
    font-size: 14px;
    font-weight: bold;
}
.Ptable {
    background-color: #E8F3FB;
    text-align: left;
    width: 98%;
}
.Oimg {
    border: 0 none currentcolor;
    height: 15px;
    width: 15px;
}
.Etext {
    border: 1px solid #C5E2F2;
    height: 350px;
    overflow: visible;
    width: 800px;
}
.WStop {
    border: 1px solid #D4E9F7;
    margin-bottom: 10px;
}
.WStop1 {
    background-color: #ECF5FB;
    padding-left: 5px;
}
.WStop2 {
    color: #3333FF;
    font-size: 14px;
    font-weight: bolder;
    height: 30px;
    line-height: 30px;
    padding: 0 0 0 5px;
    text-align: center;
}
.WSIn {
    color: #333333;
    display: block;
    line-height: 22px;
}
.WSTitle {
    color: #336699;
    margin-left: 28px;
}
.WStxt {
    border: 1px solid #C5E2F2;
    height: 150px;
    overflow: visible;
    width: 800px;
}
.WSradio {
    height: 16px;
    width: 16px;
}
.WSt {
    margin-left: 27px;
}
.WSt1 {
    margin-left: 22px;
    margin-top: 2px;
}
.Gbtop {
    border: 1px solid #D4E9F7;
    margin-bottom: 10px;
    text-align: left;
}
.Gbtxt {
    border: 1px solid #C5E2F2;
    height: 250px;
    overflow: visible;
    width: 800px;
}
.GbIn1 {
    margin-left: 28px;
    margin-top: 15px;
}
.GbIn2 {
    margin-left: 22px;
    margin-top: 2px;
}
.HJtxt {
    border: 1px solid #C5E2F2;
    height: 150px;
    overflow: visible;
    width: 800px;
}
.utspan {
    background-color: #ECF5FB;
    border: 1px solid #D4E9F7;
    color: #FF3300;
    font-weight: bold;
    padding: 6px;
}
.utdiv {
    color: #006AAD;
    font-size: 19px;
    font-weight: bold;
    padding-bottom: 20px;
    padding-top: 23px;
}
.utddiv {
    color: #006AAD;
    font-size: 14px;
    font-weight: bold;
    padding-bottom: 20px;
    padding-top: 23px;
}
.uttd {
    font-size: 14px;
    font-weight: bold;
    width: 150px;
}
.bs {
    color: #EA5F00;
    font-size: 15px;
    font-weight: bold;
}
.bs1 {
    color: #EA5F00;
    font-size: 13px;
}
.f a {
    color: #0000CC;
}
.f {
    height: 22px;
    line-height: 22px;
    padding: 10px 10px 10px 0;
    text-align: left;
}
.f h3 {
    display: inline;
}
.f .num {
    color: #0069CC;
    font-size: 16px;
    width: 20px;
}
.f .t {
    font-size: 15px;
}
.zilan table {
    border-bottom: 1px solid #B2B2B2;
}
.zilan table tr td {
    line-height: 25px;
}
.zilan li {
    list-style: none outside none;
}
.zilan em {
    color: #C60A00;
    font-style: normal;
}
.zilan h3 {
    font: 15px Tahoma,Arial;
}
.zilan cite {
    font: 15px Tahoma,Arial;
}
#Show_User_Ip {
    background: url("../images/h1-bg.gif") repeat-x scroll 0 0 transparent;
    border-color: #C5E2F2 #C5E2F2 currentcolor;
    border-style: solid solid none;
    border-width: 1px 1px 0;
    color: #0066CC;
    height: 37px;
    line-height: 37px;
    overflow: hidden;
    padding-left: 20px;
}
#Show_User_Ip .sotopleft {
    float: left;
    overflow: hidden;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 12px;
    padding-top: 0 !important;
}
#Show_User_Ip .sotopright {
    float: right;
    font-weight: bold;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 12px;
    padding-top: 0 !important;
}
#ToolBox {
    background-color: #FFFFFF;
    border: 1px solid #BFC2D3;
    position: absolute;
    width: 220px;
}
#ToolBox ul {
    margin: 2px;
    padding: 0;
    text-align: left;
}
#ToolBox ul li {
    background-color: #FAFAFA;
    line-height: 25px;
    list-style-type: none;
}
#ToolBox ul li a {
    cursor: pointer;
    display: block;
    font-family: Arial;
    padding-left: 2px;
    width: 99%;
}
#ToolBox ul li a:hover {
    background-color: #E8F0FB;
    color: #3333FF;
    text-decoration: none;
}
.prsearchresult {
    background-color: #669BCC;
    text-align: center;
}
.prsearchresult td {
    padding: 8px;
}
.pr-iframe {
    -moz-user-select: none;
    display: inline-block;
    height: 16px;
    overflow: hidden;
    width: 1em;
}
.pr-iframe iframe {
    margin: -10px 0 0 -79px;
}
#chinaz_topbar {
    float: right;
}
button {
    overflow: visible;
}
.detail {
    overflow: hidden;
    padding: 10px;
}
.detail ul {
    border-left: 1px solid #B2B2B2;
    border-top: 1px solid #B2B2B2;
    height: 30px;
}
.detail li {
    border-bottom: 1px solid #B2B2B2;
    border-right: 1px solid #B2B2B2;
    float: left;
    list-style: none outside none;
    width: 100px;
}
.detail .head {
    background-color: #D4E6F7;
    color: green;
}

好了在这里就提供 这些吧，更详细的大家可以在线测试

参考资源：http://www.cckan.net/thread-453-1-1.html