Question

任何人都可以告诉我如何将这段代码放在一个基本的html页面中：

var autoSizeText;
autoSizeText = function() {
  var el, elements, _i, _len, _results;
  elements = $('.resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _results = [];
  for (_i = 0, _len = elements.length; _i < _len; _i++) {
    el = elements[_i];
    _results.push((function(el) {
      var resizeText, _results1;
      resizeText = function() {
        var elNewFontSize;
        elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';
        return $(el).css('font-size', elNewFontSize);
      };
      _results1 = [];
      while (el.scrollHeight > el.offsetHeight) {
        _results1.push(resizeText());
      }
      return _results1;
    })(el));
  }
  return _results;
};

我从这个链接获得了代码：Here.我正在尝试使用Javascript Compiled代码部分，因为我还不知道如何使用CoffeeScript。

谢谢你们。

其他信息：到目前为止，我已经尝试将编译后的代码放在end body标记之前，并将代码放入脚本标记中，但它仍然无效。我正在尝试使用代码，因为我在响应div中有文本（即：divcontainingtext {width：80％; height：20％;}）我想要响应。此外，我已经尝试使用FitText，它还没有解决我的问题（文本仍然从包含div溢出，文本只是对我不够响应;我知道我可以使用溢出样式使文本不溢出但我不是在寻找滚动条。）

编辑：我已经将代码放在我的结束体标记之前的脚本标记中。我也放了

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

在我头上的标签。

Answer 1

将此脚本放入文件中，以结尾的myScript.js保存（最好在名为js的文件夹中）

在您的HTML代码中

通过

链接myScript.js

 <script type="text/javascript" src="js/myScript.js"></script>

在html中，如果脚本在js文件夹中。

Answer 2

将脚本放在页眉或页脚的<script></script>标记内。同时在</script>代码之前添加以下内容。

 $(document).ready -> autoSizeText()

您需要修改上面的jquery $(document).ready(function()。

示例小提琴here。

Answer 3

只需使用script代码：

选项1：

<html>
<head>
  <script>
    var autoSizeText;
    ...
      return _results;
    };  
  </script>
...
</head>
<body>
...
</body>

选项2（推荐）。将js代码保存到js文件，例如someScript.js，然后像这样加载：

<html>
<head>
  <script src="someScript.js"></script>
  ...
</head>
<body>
...
</body>

src中指定的路径与您的.html文件相关，在此示例中，两个文件位于同一目录中。如果js保存在例如scripts文件夹中，则路径为src="scripts/someScript.js"

干杯

Answer 4

<强> HTML

<div class="container">
    <div class="no-resize">This text won't be resized and will go out of the div.</div>
    <div class="resize">hout of the div.</div>
</div>

<强>的Javascript

<script>

var autoSizeText;
autoSizeText = function() {
  var el, elements, _i, _len, _results;
  elements = $('.resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _results = [];
  for (_i = 0, _len = elements.length; _i < _len; _i++) {
    el = elements[_i];
    _results.push((function(el) {
      var resizeText, _results1;
      resizeText = function() {
        var elNewFontSize;
        elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';
        return $(el).css('font-size', elNewFontSize);
      };
      _results1 = [];
      while (el.scrollHeight > el.offsetHeight) {
        _results1.push(resizeText());
      }
      return _results1;
    })(el));
  }
  return _results;
};

autoSizeText(); // here is where we call the function.

</script>

<强> CSS

<style>
    .no-resize, .resize {
    width: 100px;
    height: 50px;
    border: 1px solid #000;
    color: #000;
    float: left;
    margin-left: 10px;
    font-size: 15px
}
</style>

另外，请务必同时加载jQuery。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

Answer 5

这里有一些错误。

<强>第一

代码只创建一个函数。您还需要调用该函数：

autoSizeText();

<强>第二

代码正在寻找具有一类响应的元素。你提到的div有一类包含文本的div。您需要更改div的类或代码。

Answer 6

当您将代码置于关闭正文标记之前时，是否将代码放在脚本标记内？浏览器在放入正文时仍然需要知道它的javascript。

如果将代码放在head标记中，则运行代码时，.resize元素仍然不存在。如果你将它放在页面正文末尾的脚本标记内，那么所有内容都会被加载并且代码应该正常工作，从而限制编码错误。

此外，您正在调用jQuery，因此您需要在head标记中添加以下脚本以引用jQuery。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

最后但并非最不重要的是，请务必调用autoSizeText（）;在现有代码之后。

如何将已编译的JavaScript代码放入我的HTML页面？

6 个答案: