zoukankan      html  css  js  c++  java
  • window.open代码生成器

    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

    本人的博客不再维护从2013年就不再维护了 需要我帮助的朋友请到我的个人论坛 http://www.sufeinet.com 进行讨论,感谢大家对我的支持!
  • 相关阅读:
    360给腾讯造的盗梦空间
    C 语言 运算符优先级
    CorelDraw, Adobe Illustrator 转换到 Photoshop 形状路径
    用户体验经典解释
    禁用Windows XP的自动播放功能
    ObjectiveC ARC下的内存管理(一)
    ARC下的内存管理(二)对象及成员的引用关系
    天天撞墙
    PS: 操作不实时显示的解决办法
    摩托罗拉 Milestone新手刷机教程
  • 原文地址:https://www.cnblogs.com/sufei/p/2702147.html
Copyright © 2011-2022 走看看