V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
omph
V2EX  ›  JavaScript

我的第一个纯 JS 程序

  •  2
     
  •   omph · 2018-01-10 17:10:20 +08:00 · 7289 次点击
    这是一个创建于 2514 天前的主题,其中的信息可能已经有所发展或是发生改变。

    作为一个对 js、css 一无所知的菜鸟,只想做一个 bookmarklet,实现对页面上表单的自动输入。
    表单长下面这样,待输入的数据很多,都在 excel 文件里。
    pQuHbt.png

    我的思路:直接弹出一个输入框,把 excel 里的数据复制进去,点确定后,自动把数据解析、填写到表单对应的地方。如果要更可靠一点,需要把表头也复制进去做对比,匹配到正确的列才输入,因为数据一旦提交,非常不方便修正。

    下面就是从抄袭到跑路的过程
    被抄袭的二手代码:javascript 弹出层输入框,是在菜鸟教程在线编辑器里调试的
    经过一下午的魔改,填鸭式的了解各种概念,整容为了这样:
    pQaSYj.png

    **问题:怎么把那个输入框的大小扩充到整个弹出层上?如何点确定后获得输入数据? **

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script>
      function alertWin(title, msg, w, h) {
    
        var titleheight = "22px"; // 窗口标题高度
        var bordercolor = "#666699"; //窗口的边框颜色
        var titlecolor = "#FFFFFF"; // 窗口的标题颜色
        var titlebgcolor = "#666699"; // 窗口的标题背景色
        var bgcolor = "#FFFFFF"; // 内                                                                                      容背景色
        var iWidth = document.documentElement.clientWidth; //这个窗口的宽度
        var iHeight = document.documentElement.clientHeight; //这个窗口的高度
    
        //创建一个弹出层
        var msgObj = document.createElement("div");
        //设置弹出的层的样式
        msgObj.style.cssText = "position:absolute;font:11px '宋体';top:" + (iHeight - h) / 2 + "px;left:" + (iWidth - w) / 2 + "px;width:" + w + "px;height:" + h + "px;text-align:center;border:1px solid " + bordercolor + ";background-color:" + bgcolor + ";padding:1px;line-height:22px;z-index:1001;";
        document.body.appendChild(msgObj);
        //创建一个 table 用于容纳层上的内容
        var table = document.createElement("table");
        //将 Table 放到弹出层上
        msgObj.appendChild(table);
        //设置 table 的格式
        table.style.cssText = "margin:0px;border:0px;padding:0px;";
        table.cellSpacing = 0;
        //插入一行用于显示标题
        var tr = table.insertRow(-1);
        //插入一个单元格用于容纳动作按钮
        var submitBtn = tr.insertCell(-1);
        submitBtn.style.cssText = "text-align:center;background-color:" + titlebgcolor;
        submitBtn.innerHTML = "<input type='Button' value='确定' id='saveHeader' onclick='return GetCark()' />";
        //插入一个单元格用于容纳标题
        var titleBar = tr.insertCell(-1);
        titleBar.style.cssText = "width:100%;height:" + titleheight + "px;text-align:center;padding:3px;margin:0px;font:bold 13px '宋体';color:" + titlecolor + ";border:1px solid " + bordercolor + ";background-color:" + titlebgcolor;
        titleBar.style.paddingLeft = "10px";
        //设置标题
        titleBar.innerHTML = title;
    
        //关闭按钮
        var closeBtn = tr.insertCell(-1);
        closeBtn.style.cssText = "cursor:pointer; text-align:right;padding:2px;background-color:" + titlebgcolor;
        closeBtn.innerHTML = "<span style='width:100%;height:100%;font-size:15pt;color:" + titlecolor + ";'>×</span>";
        closeBtn.onclick = function() {
            document.body.removeChild(msgObj);
        }
    
        //层上模板名称的内容
        var nameBox = table.insertRow(-1);
        var nametext = nameBox.insertCell(-1);
        nametext.colSpan = 3;
        nametext.style.cssText = "font:12pt '宋体';text-align:Left; margin-left:0px";
        nametext.innerHTML = "<textarea id='modalName'>";
    } 
    </script>
    </head>
    <body>
    
    <h1>我的第一个 JavaScript 程序</h1>
    <button type="button" onclick="alertWin('录入','',300,150);">输入数据</button>
    
    </body>
    </html>
    
    第 1 条附言  ·  2018-01-10 17:47:51 +08:00
    论起对标题的重要性 [沉思中。。。]
    第 2 条附言  ·  2018-01-11 19:09:32 +08:00

    p14Zpn.gif

    代码已整理好,贴在了码云上:https://gitee.com/mrH/codes/cypzwhjuifmvgae15x49k33
    至于如何将 js 转化为 bookmarklet,可以先压缩再转,参考:

    1. Bookmarklet编写指南
    2. 在线JS/CSS/HTML压缩
    3. bookmarklet转换工具

    然后,把这个 bookmarklet 添加为书签即可,点击便能使用,非常轻便。

    个人感受:

    1. js 比 python 难用多了,哈哈
    2. 显示效果在不同网站上不太一样,有的网站惨不忍睹,可能是受到了网站 css 的影响,不知道怎么解决,但能用
    3. 若引入库,代码应该可以更简洁,显示效果更好,功能更强。我都不会
    4. 做界面真头痛
    5. 若有人觉得有用,并做了改进,请通知我,我直接拿来用,感激不尽!
    33 条回复    2018-01-11 17:36:19 +08:00
    nuxt
        1
    nuxt  
       2018-01-10 17:15:12 +08:00   ❤️ 4
    第一次就写的这么牛逼,有发展!
    下来该学 es6、typescript、node、webpack、sass、stylus、vue、react 了,good luck
    omph
        2
    omph  
    OP
       2018-01-10 17:19:49 +08:00
    @nuxt 代码基本靠抄,改动很少。后面该怎么做啊?请教一下
    charexcalibur
        3
    charexcalibur  
       2018-01-10 17:33:14 +08:00
    厉害,我第一次都是`console.log(hello world)`来的。。。
    omph
        4
    omph  
    OP
       2018-01-10 17:35:14 +08:00
    @charexcalibur 为什么没有人关注我的问题呢?忘了在标题里加“求助”两个字了
    aaronzjw
        5
    aaronzjw  
       2018-01-10 17:35:34 +08:00
    厉害,我第一次都是`sudo rm -rf ~/*`来的
    charexcalibur
        6
    charexcalibur  
       2018-01-10 17:35:49 +08:00
    啊,蓝瘦,注释后带空格有的不带。。。要死了。。
    geelaw
        7
    geelaw  
       2018-01-10 17:36:42 +08:00 via iPhone
    我感觉我在看 VBA ……
    wangt21
        8
    wangt21  
       2018-01-10 17:43:29 +08:00 via Android
    @charexcalibur 我是 document.write("hello,world")
    Tenma
        9
    Tenma  
       2018-01-10 17:47:39 +08:00
    你要用 CSS 来控制啊,如果 CSS 不能控制就想其他办法——来自一位 Android 程序员。
    omph
        10
    omph  
    OP
       2018-01-10 17:49:23 +08:00
    @Tenma 你好!我是一位 C 程序员
    Tuisku
        11
    Tuisku  
       2018-01-10 17:51:34 +08:00   ❤️ 1
    第一个问题, 我的思路是 => 不要用 table 布局, dialog 的 div 下包含标题和下面的 textarea 两个 div, 放置 textarea 的 div 设置固定高度
    然后 textarea 的 css:
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;

    第二个问题, 用 js 获得数据:
    const getValue = document.getElementById("modalName").value
    holysin
        12
    holysin  
       2018-01-10 17:52:24 +08:00
    导入到 jxbox 客户端( IOS )跑跑看
    dannywu1991
        13
    dannywu1991  
       2018-01-10 17:53:16 +08:00
    @aaronzjw 你电脑怎么还能启动
    ryanhui
        14
    ryanhui  
       2018-01-10 17:53:27 +08:00   ❤️ 1
    给 <textarea> 设置 css 样式 height:100% width:100% 能够填满父元素
    Pastsong
        15
    Pastsong  
       2018-01-10 17:55:10 +08:00
    这很不纯 JS 啊,还用到了 HTML CSS 和 DOM API ..
    (Just kidding. 还是很赞的
    holysin
        16
    holysin  
       2018-01-10 17:55:30 +08:00
    [Line: 2] SyntaxError: Unexpected token '<'
    omph
        17
    omph  
    OP
       2018-01-10 18:07:57 +08:00
    @ryanhui 这样宽度是填满了,但高度不行
    Tuisku
        18
    Tuisku  
       2018-01-10 18:10:54 +08:00
    @omph #17
    因为你父元素的高度就是那么高
    oswuhan
        19
    oswuhan  
       2018-01-10 18:11:47 +08:00
    帮大家扫清视觉盲区 —— 作者写了这么多就是想问个 CSS 的问题,具体问题大家仔细找找看,找达到的
    OhIAmFine
        20
    OhIAmFine  
       2018-01-10 18:13:09 +08:00   ❤️ 1
    <textarea rows=’ 123 ‘ cols=’ 123 ‘>加上这两个属性值试试
    OhIAmFine
        21
    OhIAmFine  
       2018-01-10 18:14:40 +08:00
    nametext.innerHTML = "<textarea id='modalName' rows='123' cols='123 ' >";
    aaronzjw
        22
    aaronzjw  
       2018-01-10 19:25:55 +08:00
    @dannywu1991 换一台继续
    a342191555
        23
    a342191555  
       2018-01-10 19:45:18 +08:00
    @aaronzjw 你少打了一个空格
    hareandlion
        24
    hareandlion  
       2018-01-10 19:49:28 +08:00 via iPhone
    @nuxt 你看不起 angular1、2 和万物起源 jquery 吗 :-b
    ryanhui
        25
    ryanhui  
       2018-01-10 20:58:50 +08:00
    @omph 你需要给父元素也设置高度 比如 100%
    omph
        26
    omph  
    OP
       2018-01-10 23:40:50 +08:00
    @Tuisku
    @ryanhui 父元素是哪个?怎么设置它的高度为自适应?
    dd0754
        27
    dd0754  
       2018-01-11 00:02:33 +08:00   ❤️ 1
    table.style.cssText = "margin:0px;border:0px;padding:0px; width:100%; height:100%;";
    nametext.style.cssText = "font:12pt '宋体';text-align:Left; margin-left:0px; width:100%; height:100%;";
    nametext.innerHTML = "<textarea id='modalName' style='width:100%; height:100%; box-sizing:border-box; border:none; padding:5px; outline:none;'>";
    omph
        28
    omph  
    OP
       2018-01-11 00:57:32 +08:00
    @dd0754 原来如此,多谢啊!界面一下搞定了,到时候放代码,利益有缘人
    wukongkong
        29
    wukongkong  
       2018-01-11 06:31:46 +08:00 via Android
    有个解析 xml 的库的啊,直接上传文件回填到表格中
    BillionWang
        30
    BillionWang  
       2018-01-11 10:41:48 +08:00
    楼上都是表扬的?? 那我也表扬下。
    css 和 html 别和 JS 混在一起好么。看着特别难受
    kingcc
        31
    kingcc  
       2018-01-11 10:46:13 +08:00
    我不太喜欢在 JS 里面看到 element.style,尤其是你还把 HTML 放出来的时候
    focusheart
        32
    focusheart  
       2018-01-11 16:44:53 +08:00
    界面简单一点嘛……不要弹出了~

    <!doctype html>
    <html>
    <head>
    <title>Hi omph</title>
    <style>
    #data-area { width: 100%; height: 200px; }
    </style>
    </head>
    <body>
    <h1>omph js form</h1>
    <p>I can .. <button onclick="toggleArea('inline');">Show Area</button> |
    <button onclick="toggleArea('none');">Hide Area</button> |
    <button onclick="getData();">Get Data</button></p>
    <textarea id="data-area"></textarea>

    <script>
    function toggleArea(display) {
    document.getElementById('data-area').style.display = display;
    }

    function getData() {
    var data = document.getElementById('data-area').value;
    // do something to your value

    alert(data);
    }
    </script>
    </body>
    </html>
    omph
        33
    omph  
    OP
       2018-01-11 17:36:19 +08:00
    @focusheart 感谢。不过我是在别人的网站上做这个输入功能的,网页代码控制不了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3597 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 10:42 · PVG 18:42 · LAX 02:42 · JFK 05:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.