0

我正在制作一个关于某位英国政客的模仿页面，使用 Javascript 自动生成他的政策。

我已经让生成文本的 Javascript 在我的网站上正常工作。但是，我并没有设法让 Javascript 输出正确显示在 test.html 页面上的“语音气球”中（抱歉，如果发布 URL 违反了规则，我只是认为更容易说明什么我是说通过将人们指向实际页面）。

这里有几个问题：

1) 我正在使用 iframe 尝试将策略放入语音气球中。首先，我不确定如何制作 div 以便它始终处于相对于图片的正确位置。关于我需要的 CSS 代码的任何线索？还是完全放弃相对定位并使用绝对值会更好？

2) 更重要的是，如何让政策文本在气球内自动换行？它只需要在气球中的一个盒子内自动换行，我不需要任何花哨的东西，比如跟随气球的轮廓。

3）我如何给文本属性，如字体、大小等？

我搜索了类似的问题，但没有找到任何可以直接应用于我的特定项目的东西。

提前感谢您的帮助，这看起来是一个非常有用的网站。

更新：好的，伙计们，我显然在这里超出了我的深度，所以如果可能的话，一些关于实现这一目标的更简单方法的建议将不胜感激。

文本生成器的代码可以通过查看policies.html链接的源代码来查看。

我想要做的是让这个生成的文本出现在 test.html 页面上。但我只能让它以纯文本形式显示，没有任何格式，而且它也不包含在文本框中。

4

2 回答 2

0

使用 jQuery，您可能需要将图像切割成块以适合里面的文本。

<script type="text/javascript">
    function getRandomText()
    {
        var verbs=['Butcher','Punish','Impoverish','Annihilate','Dispossess','Humiliate','Denounce','Vilify','Torture','Execute','Shaft'];
        var victims=['single mothers','young people','the disabled','benefit scroungers','council tenants','council estate riff-raff','human rights lawyers','do-gooders','judges who say I am wrong','the poor'];
        var outcomes=['until they vote Tory','with a spoon','with a cattle prod','with a Taser','with a spoon','during a zombie apocalypse'];
        var endings=[' and then cut their benefits.',', then let Dementors suck out their lifeforce.',', then give bankers another bailout.',' and then make them work for nothing.','. I will pass emergency regulations to make it legal.',' and send their relatives to the workhouse.',', then let them eat cake.'];

        for(x=0;x<Math.round(Math.random()*10);x++){
            var _JuNk=Math.random();
        }

        return verbs[Math.round(Math.random()*(verbs.length-1))]+' '+victims[Math.round(Math.random()*(victims.length-1))]+' '+outcomes[Math.round(Math.random()*(outcomes.length-1))]+endings[Math.round(Math.random()*(endings.length-1))]+'\n';
    }

    $(document).ready(function() {
        $("#Refresh").click(function () {
            var randomText = getRandomText();
            $("#Result").html(randomText);
        })
    });
    </script>
</head>

<body>
    <div class="container">
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
                non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
            <button id="Refresh">More...</button>
            <div class="picture">
                <table class="table">
                    <tr>
                        <td>Top Left</td>
                        <td>Top Center</td>
                        <td>Rop RIght</td>
                    </tr>
                    <tr>
                        <td>Middle Left</td>
                        <td><div id="Result">Balloon Content</div></td>
                        <td>Middle Right</td>
                    </tr>
                    <tr>
                        <td>Bottom Left</td>
                        <td>Bottom Center</td>
                        <td>Bottom Right</td>
                    </tr>
                </table>
            </div>
    </div>
    <!-- end .content -->
    </div>
    <!-- end .container -->
    </div>
</body>
于 2013-02-24T06:03:43.980 回答
0

这可能与您的特定问题无关，但如果您想在 HTML 文档中使用 PHP，您会这样做。首先你有你的PHP脚本（在你的情况下是Javascript）然后在你的HTML文档中你会使用类似的东西

    <!--#include virtual="../quote.js" -->
于 2013-02-24T06:12:31.070 回答