Fatal编程技术网
  • javascript/
  • 尝试使用自定义javascript在google web designer中创建动画动态字段

尝试使用自定义javascript在google web designer中创建动画动态字段

javascript

尝试使用自定义javascript在google web designer中创建动画动态字段,javascript,google-web-designer,Javascript,Google Web Designer,我发现了这个JavaScript，它完美地为文本设置了动画，但是如何在GoogleWebDesigner中为这个脚本指定一个动态字段呢 下面是jsfiddle链接，指向动态文本将如何设置动画 功能机场（el，阵列）{ var-self=el； var items=array.length； var items2=array.length； “a”、“b”、“c”、“c”、“d”、“e”、“e”、“f”、“f”、“c”、“c”、“d”、“e”、“f”、“g”、“g”等，“h”、“h”、“i”、“

我发现了这个JavaScript，它完美地为文本设置了动画，但是如何在GoogleWebDesigner中为这个脚本指定一个动态字段呢

下面是jsfiddle链接，指向动态文本将如何设置动画

功能机场（el，阵列）{
var-self=el；
var items=array.length；
var items2=array.length；
“a”、“b”、“c”、“c”、“d”、“e”、“e”、“f”、“f”、“c”、“c”、“d”、“e”、“f”、“g”、“g”等，“h”、“h”、“i”、“j”、“k”、“l”、“l”、“m”、“m”、“m”、“m”、“n”、“n”、“o”、“o”、“p”、“p”、“p”、“p”、“p”、“p”、“p”、“p”、“l”、“l”、“p”、“l”、“l”、“m”、“m”、“n”、“n”、“o”、“o”、“p”、“p”、“p”、“q”、“q”、“q”、“q”、“r”、“r”、“r”、“r”、“r”、“s”、“s”、“s”、“t”、“t”、“t”、“t”、“t”、“p”、“p”、“p”、“p”、“p”、“p”、“p”、“q”、“q”、“q”、“p”、“q”、“q”、“q”、“q”、“q”、“q”、“r”、“r”、“r”、“r”、“r”、“r”、“r”、“r”、“r”、“r”、“r”、“r”、“s”、“s”、“t”、“t”、“s”、“t”、“t”、“t”、“t”、“t”、“t”、“t”、“t”、“t”、“t”、“t”、“t”、“t”、“u”、“t”、““Ó”、“Ù”、“Ú”];
var=0；
变量选项={
过渡速度：2000，
填充空格：false，
最长：0
};
//向数组中短于最长字符串的字符串添加额外空格
功能板（a、b）{
返回一个+新数组（b-a.length+1）.join（“”）；
}
self.innerHTML=''；
//查找数组中最长的字符串
而（项目--）{
if（数组[项目]。长度>最长）{
最长=数组[项目]。长度；
}
}
//使数组中的所有字符串长度相同
而（第2项--）{
数组[items2]=pad（数组[items2]，最长）；
}
跨度=最长；
而（跨越--）{
var span=document.createElement（'span'）；
span.className='c'+span；
self.insertBefore（span，self.firstChild）；
}
//a-跨度元素的编号
//b-用于根据数组[xx]中的每个字母检查字符[b]
//c-数组中的当前字[c]
//d-用于跟踪数组中每个字母的位置[xx]
函数init（a，b，c，d）{
var el=自查询选择器（'.c'+a）；
变量当前字母=数组[c]？数组[c]。子字符串（d，d+1）：null，
计时器，
word_len=数组[c]？数组[c]。trim.length:null，
prev_word_len=数组[c-1]？数组[c-1]。trim.length:数组[0]。trim.length；
如果（c>=array.length）{//reset
计时器=设置超时（函数（）{
init（1,1,1,1）；
}, 10);
}
否则，如果（d>=最长）{//转到下一个单词
计时器=设置超时（函数（）{
init（0,0，c+1,0）；
}，选择转换速度）；
控制台日志（opts）；
}
否则{
el.innerHTML=chars[b]=''？''：chars[b]；
计时器=设置超时（函数（）{
如果（b>字符长度）{
初始值（a+1,0,c，d+1）；
}
//如果字符[]中的下一个字母与数组[xx]中的当前字母不匹配，请转到该字母
else if（chars[b]！==当前字母.toLowerCase（））{
初始（a，b+1，c，d）；
}
否则{//在这里找到了这封信
el.innerHTML=当前字母==''&&opts.fill\u space？''：当前字母；
if（单词长度<上一单词长度）{
如果（a>单词）{
对于（a；a
请帮忙，我对JavaScript非常熟悉，我边学边学。谢谢！！

这里有一个动态的解决方案，可以解决你最初的问题，不需要谷歌网页设计师的东西。（坦白地说，我建议一个做网站的新手从简单的教程开始，在你的html/js/css工具中使用类似atom.io的东西。找一本像样的书或教程，也许类似的东西）

这里是一个更新的JSFIDLE（重要提示：在JSFIDLE页面的左侧空白处，选择框架和扩展
no wrap in
）

顶部html的轻微修改：

<body>
    <label for="textValue">New Text:</label>
        <input type="text" id="textValue" value="Place new text here." />
    <button onclick="hello()">Click me</button>
    <div class="example"></div>
</body>
如果你坚持使用Google Web Designer，你会进入开发工具的底部，点击“代码视图”按钮，然后小心地将javascript的关键元素添加到块中。在这里要非常小心，这样你就不会删除或更改任何机器生成的代码

哦..谷歌网页设计师的更新。结果是

GoogleWebDesigner（GWD）是一种用于创建 HTML5/CSS3/Javascript横幅和广告使用动画和 3D转换。使用图形工具，如绘图、文本和 3D对象，可以在时间轴上设置这些对象和事件的动画 使用关键帧。GWD显然不是为了创建完全成熟的 应用程序或整个网站，而不是横幅、弹出式广告， 侧边栏，甚至是动画按钮，特别关注 双击和AdWords活动

是的，你可以在这些元素中添加自定义JavaScript，但是你应该先熟悉JS。除了上面提到的元素之外，还生成了许多JS文件。

在Google Web Designer中，你可以创建一个自定义事件来调用airport函数

从事件面板中，添加新事件。 您可以将事件附加到已加载广告的事件或特定用户行为。 作为操作，选择“自定义”。添加新的自定义操作。您可以在此处定义自定义函数，并在函数中添加要调用的代码

记住，每个全局变量都可以通过document.variable_name

获得，但不要太主观，为什么要使用Google Web Designer？这看起来像是一个模板开发工具，专注于移动ap 
<body>
    <label for="textValue">New Text:</label>
        <input type="text" id="textValue" value="Place new text here." />
    <button onclick="hello()">Click me</button>
    <div class="example"></div>
</body>

function hello() {
    var textInputVal = document.getElementById('textValue').value;
    console.log(textInputVal);
    // Call element by selected class or ID
    airport(
        document.querySelector('.example'),
        // pass in data to be outputed here
        [textInputVal]
    )
}