JSON：字符串错误

Question

我正在尝试用这个 JSON 创建一个 JSONBlob:

{
    "res": "<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'/> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/> <meta name='viewport' content='width=device-width'/> <meta name='ad.size' content='width=300,height=250'/> <title>Banner</title> <style>*{box-sizing: border-box;}body{margin: 0; padding: 0;}.hide{display: none;}#banner{width: 300px; height: 250px; position: relative; overflow: hidden; -webkit-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear;}[class^='scene']{display: none; width: 300px; height: 250px; position: absolute; top: 0; left: 0; overflow: hidden;}[class^='scene'] > div, [class^='scene'] > img{position: absolute;}.scene0{background-color: #9719d7;}.scene0 .logo{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: 0px 0px; width: 223px; height: 179px; right: 0; top: 35px;}.scene0 .fee{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px -61px; width: 127px; height: 49px; top: 100px; left: 30px;}.scene0 .gone{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px -180px; width: 101px; height: 43px; top: 104px; left: 170px;}.scene0 .dolar{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -360px -61px; width: 23px; height: 49px; top: 100px; left: 30px;}.scene0 .l_5{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -388px -61px; width: 23px; height: 43px; top: 104px; left: 55px;}.scene0 .l_f{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -360px -180px; width: 20px; height: 42px; top: 104px; left: 90px;}.scene0 .l_e1{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -334px -180px; width: 21px; height: 42px; top: 104px; left: 112px;}.scene0 .l_e2{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -334px -180px; width: 21px; height: 42px; top: 104px; left: 135px;}.scene0 .hand{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: 0px -184px; width: 128px; height: 254px; top: 165px; left: -70px;}.scene1 .cover{background-color: #da1710; width: 300px; height: 250px;}.scene1 .purple_stripe{width: 12px; height: 250px; background-color: #9719d7;}.scene1 .logo_w{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -364px -142px; width: 41px; height: 18px; left: 25px; top: 20px;}.scene1 .title{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px -115px; width: 188px; height: 22px; left: 25px; top: 55px;}.scene1 .copy{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px 0px; width: 191px; height: 56px; left: 25px; top: 90px;}.scene1 .cta{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px -142px; width: 131px; height: 33px; left: 25px; top: 180px;}.chopper{position: absolute; top: -600px; left: -850px;}</style> <script type='text/javascript'>var clickTag='https://www.google.com.au'; </script> </head> <body> <a href='javascript:window.open(window.clickTag)'> <div id='banner'> <div class='scene0'> <div class='logo'></div><div class='fee'></div><div class='gone'></div><div class='dolar'></div><div class='l_5'></div><div class='l_f'></div><div class='l_e1'></div><div class='l_e2'></div><div class='hand'></div></div><div class='scene1'> <div class='cover'></div><div class='purple_stripe'></div><div class='logo_w'></div><div class='title'></div><div class='copy'></div><div class='cta'></div></div><div class='chopper'> <svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' width='2002.5' height='2002.5' viewBox='0 0 2002.5 2002.5' > <defs> <mask id='maskR1'> <circle id='pie1' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #ffffff; stroke-miterlimit: 10; stroke-width: 2000px; '/> </mask> <mask id='maskP1'> <circle id='pie2' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #ffffff; stroke-miterlimit: 10; stroke-width: 2000px; '/> </mask> <mask id='maskP2'> <circle id='pie3' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #ffffff; stroke-miterlimit: 10; stroke-width: 2000px; '/> </mask> </defs> <g mask='url(#maskR1)'> <circle id='pieChange1' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #990000; stroke-miterlimit: 10; stroke-width: 2000px; '/> </g> <g mask='url(#maskP1)'> <circle id='pieChange2' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #ff1fdd; stroke-miterlimit: 10; stroke-width: 2000px; '/> <g id='logoChange2'> <path d='M920.51,749.28c9,0,14.86,3.26,18.34,14.85h0L963.35,840s3.79,10.11,7.25,10.73H922.36c-9,0-16.91-5-19.44-14.6h0l-22-76.19s-2.37-9.2-6-10.65h45.51Zm204.49,0c-3.58,1.45-6,10.65-6,10.65l-22,76.19c-2.54,9.56-10.46,14.6-19.44,14.6H1029.4c3.45-.62,7.24-10.73,7.24-10.73l24.52-75.86c3.46-11.59,9.34-14.85,18.32-14.85Zm-97.83,0V850.72H972.83V749.28Z' transform='translate(1.25 -70)' style='fill: #da1710; fill-rule: evenodd'/> </g> </g> <g mask='url(#maskP2)'> <circle id='pieChange3' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #991ad6; stroke-miterlimit: 10; stroke-width: 2000px; '/> <g id='logoChange3'> <path d='M920.51,749.28c9,0,14.86,3.26,18.34,14.85h0L963.35,840s3.79,10.11,7.25,10.73H922.36c-9,0-16.91-5-19.44-14.6h0l-22-76.19s-2.37-9.2-6-10.65h45.51Zm204.49,0c-3.58,1.45-6,10.65-6,10.65l-22,76.19c-2.54,9.56-10.46,14.6-19.44,14.6H1029.4c3.45-.62,7.24-10.73,7.24-10.73l24.52-75.86c3.46-11.59,9.34-14.85,18.32-14.85Zm-97.83,0V850.72H972.83V749.28Z' transform='translate(1.25 -70)' style='fill: #da1710; fill-rule: evenodd'/> </g> </g> </svg> </div></div></a> <script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script> <script>!function(e,t){'object'==typeof exports&&'undefined'!=typeof module?t(exports):'function'==typeof define&&define.amd?define(['exports'],t):t((e=e||self).window=e.window||{})}(this,function(e){'use strict';function i(){return'undefined'!=typeof window}function j(){return a||i()&&(a=window.gsap)&&a.registerPlugin&&a}function m(e){return Math.round(1e4*e)/1e4}function n(e){return parseFloat(e)||0}function o(e,t){var r=n(e);return~e.indexOf('%')?r/100*t:r}function p(e,t){return n(e.getAttribute(t))}function r(e,t,r,i,s,o){return P(Math.pow((n(r)-n(e))*s,2)+Math.pow((n(i)-n(t))*o,2))}function s(e){return console.warn(e)}function t(e){return'non-scaling-stroke'===e.getAttribute('vector-effect')}function w(e){if(!(e=v(e)[0]))return 0;var n,i,o,a,f,h,d,l=e.tagName.toLowerCase(),u=e.style,c=1,g=1;t(e)&&(g=e.getScreenCTM(),c=P(g.a*g.a+g.b*g.b),g=P(g.d*g.d+g.c*g.c));try{i=e.getBBox()}catch(e){s('Some browsers wont measure invisible elements (like display:none or masks inside defs).')}var _=i||{x:0,y:0,width:0,height:0},y=_.x,w=_.y,x=_.width,m=_.height;if(i&&(x||m)||!k[l]||(x=p(e,k[l][0]),m=p(e,k[l][1]),'rect'!==l&&'line'!==l&&(x*=2,m*=2),'line'===l&&(y=p(e,'x1'),w=p(e,'y1'),x=Math.abs(x-y),m=Math.abs(m-w))),'path'===l)a=u.strokeDasharray,u.strokeDasharray='none',n=e.getTotalLength()||0,c!==g&&s('Warning: <path> length cannot be measured when vector-effect is non-scaling-stroke and the element isnt proportionally scaled.'),n*=(c+g)/2,u.strokeDasharray=a;else if('rect'===l)n=2*x*c+2*m*g;else if('line'===l)n=r(y,w,y+x,w+m,c,g);else if('polyline'===l||'polygon'===l)for(o=e.getAttribute('points').match(b)||[],'polygon'===l&&o.push(o[0],o[1]),n=0,f=2;f<o.length;f+=2)n+=r(o[f-2],o[f-1],o[f],o[f+1],c,g)||0;else'circle'!==l&&'ellipse'!==l||(h=x/2*c,d=m/2*g,n=Math.PI*(3*(h+d)-P((3*h+d)*(h+3*d))));return n||0}function x(e,t){if(!(e=v(e)[0]))return[0,0];t=t||w(e)+1;var r=h.getComputedStyle(e),i=r.strokeDasharray||'',s=n(r.strokeDashoffset),o=i.indexOf(',');return o<0&&(o=i.indexOf(' ')),t<(i=o<0?t:n(i.substr(0,o)))&&(i=t),[-s||0,i-s||0]}function y(){i()&&(h=window,l=a=j(),v=a.utils.toArray,d=-1!==((h.navigator||{}).userAgent||'').indexOf('Edge'))}var a,v,h,d,l,b=/[-+=\.]*\d+[\.e\-\+]*\d*[e\-\+]*\d*/gi,k={rect:['width','height'],circle:['r','r'],ellipse:['rx','ry'],line:['x2','y2']},P=Math.sqrt,f={version:'3.6.0',name:'drawSVG',register:function register(e){a=e,y()},init:function init(e,r){if(!e.getBBox)return!1;l||y();var i,s,a,f=w(e);return this._style=e.style,this._target=e,r+''=='true'?r='0 100%':r?-1===(r+'').indexOf(' ')&&(r='0 '+r):r='0 0',s=function _parse(e,t,n){var r,i,s=e.indexOf(' ');return i=s<0?(r=void 0!==n?n+'':e,e):(r=e.substr(0,s),e.substr(s+1)),r=o(r,t),(i=o(i,t))<r?[i,r]:[r,i]}(r,f,(i=x(e,f))[0]),this._length=m(f),this._dash=m(i[1]-i[0]),this._offset=m(-i[0]),this._dashPT=this.add(this,'_dash',this._dash,m(s[1]-s[0])),this._offsetPT=this.add(this,'_offset',this._offset,m(-s[0])),d&&(a=h.getComputedStyle(e)).strokeLinecap!==a.strokeLinejoin&&(s=n(a.strokeMiterlimit),this.add(e.style,'strokeMiterlimit',s,s+.01)),this._live=t(e)||~(r+'').indexOf('live'),this._props.push('drawSVG'),1},render:function render(e,t){var n,r,i,s,o=t._pt,a=t._style;if(o){for(t._live&&(n=w(t._target))!==t._length&&(r=n/t._length,t._length=n,t._offsetPT.s*=r,t._offsetPT.c*=r,t._dashPT?(t._dashPT.s*=r,t._dashPT.c*=r):t._dash*=r);o;)o.r(e,o.d),o=o._next;i=t._dash||e&&1!==e&&1e-4||0,n=t._length-i+.1,s=t._offset,i&&s&&i+Math.abs(s%t._length)>t._length-.2&&(s+=s<0?.1:-.1)&&(n+=.1),a.strokeDashoffset=i?s:s+.001,a.strokeDasharray=n<.2?'none':i?i+'px,'+n+'px':'0px, 999999px'}},getLength:w,getPosition:x};j()&&a.registerPlugin(f),e.DrawSVGPlugin=f,e.default=f;if (typeof(window)==='undefined'||window!==e){Object.defineProperty(e,'__esModule',{value:!0})}else{delete e.default}}); </script> <script>(function (){window.onload=function (){initBanner();}; function initBanner(){gsap.registerPlugin(DrawSVGPlugin); tl=new TimelineLite({repeat: 2, repeatDelay: 2, onComplete: function (){},}); TweenLite.defaultEase=Cubic.easeInOut; showFrames(tl);}function generateFrame0(){var tl=new TimelineLite(); tl.addLabel('startf0'); tl.add( TweenLite.to('.hand', 0.25,{x: -10, y: -90, ease: 'none'}), 'startf0+=.5' ); tl.add( TweenLite.to('.hand', 0.25,{x: 40, y: -10, ease: 'none'}), '>' ); tl.add( TweenLite.to('.dolar', 0.35,{autoAlpha: 0, ease: 'none'}), '<' ); tl.add( TweenLite.to('.l_5', 0.35,{autoAlpha: 0, ease: 'none'}), '<' ); tl.add( TweenLite.to('.hand', 0.25,{x: 30, y: -90, ease: 'none'}), '>' ); tl.add( TweenLite.to('.hand', 0.25,{x: 65, y: -10, ease: 'none'}), '>' ); tl.add( TweenLite.to('.l_f', 0.35,{autoAlpha: 0, ease: 'none'}), '<' ); tl.add( TweenLite.to('.hand', 0.25,{x: 75, y: -90, ease: 'none'}), '>' ); tl.add( TweenLite.to('.hand', 0.45,{x: 115, y: 90, ease: 'none'}), '>' ); tl.add( TweenLite.to('.l_e1', 0.25,{autoAlpha: 0, ease: 'none'}), '<' ); tl.add( TweenLite.to('.l_e2', 0.25,{autoAlpha: 0, ease: 'none'}), '<' ); return tl;}function generateChopper(){gsap.set('circle',{transformOrigin: 'center center'}); var tl=new TimelineLite(); tl.addLabel('startChopper'); tl.add( TweenLite.fromTo( '#pie1', 3,{rotation: '-180', drawSVG: '0%', ease: 'sine.inOut'},{rotation: '0', drawSVG: '50%', ease: 'sine.inOut'}), 'startChopper+=.5' ); tl.add( TweenLite.fromTo( '#pie2', 3,{rotation: '-180', drawSVG: '0%', ease: 'sine.inOut'},{rotation: '0', drawSVG: '50%', ease: 'sine.inOut'}), 'startChopper+=.8' ); tl.add( TweenLite.to('#logoChange2', 1.5,{scale: 0.9, transformOrigin: 'center center', ease: 'sine.inOut',}), 'startChopper+=1.5' ); tl.add( TweenLite.fromTo( '#pie3', 3,{rotation: '-180', drawSVG: '0%', ease: 'sine.inOut'},{rotation: '0', drawSVG: '50%', ease: 'sine.inOut'}), 'startChopper+=1.1' ); tl.add( TweenLite.fromTo( '#logoChange3', 1.5,{scale: 0.8, transformOrigin: 'center center', ease: 'sine.inOut',},{scale: 0.6, ease: 'sine.inOut'}), 'startChopper+=2' ); return tl;}function generateFrame1(){var tl=new TimelineLite(); tl.addLabel('startf1'); tl.add( TweenLite.from('.cover', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), 'startChopper-=.5' ); tl.add( TweenLite.from('.purple_stripe', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), '<' ); tl.add( TweenLite.from('.logo_w', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), '<' ); tl.add( TweenLite.from('.title', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), '<' ); tl.add( TweenLite.from('.copy', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), '<' ); tl.add( TweenLite.from('.cta', 1,{autoAlpha: 0, ease: Strong.easeInOut}), '<' ); return tl;}function showFrames(tl){var addedtime=0.3; var frameInterval=1.5 + addedtime; var aniSpeed=1.5, aniSpeedSlow=aniSpeed + 0.5, aniSpeedFast=aniSpeed - 0.5; var loopInterval=2; tl.add('FrameStart0'); tl.add(generateFrame0(), 'FrameStart0+=.5'); tl.add('FrameStartChopper'); tl.add(generateChopper()); tl.add('FrameStart1'); tl.add(generateFrame1(), 'FrameStart1-=2.2'); document.getElementsByClassName('scene0')[0].style.display='block'; document.getElementsByClassName('scene1')[0].style.display='block';}})(); </script> </body></html>"
}

res 键的值是编译后的 HTML 字符串，我必须在前端将其用作 iframe 的 srcdoc，就像我已经在此完成 StackBlitz sample.

但出于某种原因，它在 JSON 的上下文中未被视为有效字符串。

我试过了：

使用 JSONLint 对 JSON 进行 linting，但错误出现错误：

Error: Parse error on line 2:
{ "res": "<htm
---------^
Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got 'undefined'
正在检查它是否可以 stringify 使用 JSON.stringify 编辑而不出现任何错误。
使用 typeof 检查已编译的 html 字符串的类型，这也是字符串。
正在检查但不确定问题出在哪里，我的字符串以及我如何找出字符串在什么时候不正确。

我也很好奇为什么 JavaScript 上下文中的有效字符串在 JSON 上下文中被认为无效。我在这里遗漏了什么吗？

Answer 1

如果您将 JSON 粘贴到 JavaScript 文本区域而不是 linter，错误将变得更加明显：

document.querySelector('button').addEventListener('click', () => {
  const json = document.querySelector('textarea').value;
  const parsed = JSON.parse(json);
  console.log(parsed.res);
});

<textarea placeholder="paste here"></textarea>
<button>parse</button>

Uncaught SyntaxError: Unexpected token . in JSON at position 8102

环顾 JSON 的位置 8102，您会看到：

a,v,h,d,l,b=/[-+=\.]*\d+[\.e\-\+]*\

看到那些反斜杠了吗？这些不是有效的转义序列，所以它们是无效的 JSON:

JSON.parse('{"foo":"bar\baz"}');

对它们进行双重转义以使 linter（和您的应用）满意。下面，我已经替换了这部分

a,v,h,d,l,b=/[-+=\.]*\d+[\.e\-\+]*\

和

a,v,h,d,l,b=/[-+=\.]*\d+[\.e\-\+]*\

{
    "res": "<!DOCTYPE html><html lang='en'> <head> <meta charset='UTF-8'/> <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/> <meta name='viewport' content='width=device-width'/> <meta name='ad.size' content='width=300,height=250'/> <title>Banner</title> <style>*{box-sizing: border-box;}body{margin: 0; padding: 0;}.hide{display: none;}#banner{width: 300px; height: 250px; position: relative; overflow: hidden; -webkit-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear;}[class^='scene']{display: none; width: 300px; height: 250px; position: absolute; top: 0; left: 0; overflow: hidden;}[class^='scene'] > div, [class^='scene'] > img{position: absolute;}.scene0{background-color: #9719d7;}.scene0 .logo{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: 0px 0px; width: 223px; height: 179px; right: 0; top: 35px;}.scene0 .fee{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px -61px; width: 127px; height: 49px; top: 100px; left: 30px;}.scene0 .gone{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px -180px; width: 101px; height: 43px; top: 104px; left: 170px;}.scene0 .dolar{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -360px -61px; width: 23px; height: 49px; top: 100px; left: 30px;}.scene0 .l_5{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -388px -61px; width: 23px; height: 43px; top: 104px; left: 55px;}.scene0 .l_f{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -360px -180px; width: 20px; height: 42px; top: 104px; left: 90px;}.scene0 .l_e1{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -334px -180px; width: 21px; height: 42px; top: 104px; left: 112px;}.scene0 .l_e2{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -334px -180px; width: 21px; height: 42px; top: 104px; left: 135px;}.scene0 .hand{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: 0px -184px; width: 128px; height: 254px; top: 165px; left: -70px;}.scene1 .cover{background-color: #da1710; width: 300px; height: 250px;}.scene1 .purple_stripe{width: 12px; height: 250px; background-color: #9719d7;}.scene1 .logo_w{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -364px -142px; width: 41px; height: 18px; left: 25px; top: 20px;}.scene1 .title{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px -115px; width: 188px; height: 22px; left: 25px; top: 55px;}.scene1 .copy{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px 0px; width: 191px; height: 56px; left: 25px; top: 90px;}.scene1 .cta{background-image: url(https://i.ibb.co/D8VJz1g/sprites.png); background-position: -228px -142px; width: 131px; height: 33px; left: 25px; top: 180px;}.chopper{position: absolute; top: -600px; left: -850px;}</style> <script type='text/javascript'>var clickTag='https://www.google.com.au'; </script> </head> <body> <a href='javascript:window.open(window.clickTag)'> <div id='banner'> <div class='scene0'> <div class='logo'></div><div class='fee'></div><div class='gone'></div><div class='dolar'></div><div class='l_5'></div><div class='l_f'></div><div class='l_e1'></div><div class='l_e2'></div><div class='hand'></div></div><div class='scene1'> <div class='cover'></div><div class='purple_stripe'></div><div class='logo_w'></div><div class='title'></div><div class='copy'></div><div class='cta'></div></div><div class='chopper'> <svg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' width='2002.5' height='2002.5' viewBox='0 0 2002.5 2002.5' > <defs> <mask id='maskR1'> <circle id='pie1' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #ffffff; stroke-miterlimit: 10; stroke-width: 2000px; '/> </mask> <mask id='maskP1'> <circle id='pie2' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #ffffff; stroke-miterlimit: 10; stroke-width: 2000px; '/> </mask> <mask id='maskP2'> <circle id='pie3' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #ffffff; stroke-miterlimit: 10; stroke-width: 2000px; '/> </mask> </defs> <g mask='url(#maskR1)'> <circle id='pieChange1' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #990000; stroke-miterlimit: 10; stroke-width: 2000px; '/> </g> <g mask='url(#maskP1)'> <circle id='pieChange2' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #ff1fdd; stroke-miterlimit: 10; stroke-width: 2000px; '/> <g id='logoChange2'> <path d='M920.51,749.28c9,0,14.86,3.26,18.34,14.85h0L963.35,840s3.79,10.11,7.25,10.73H922.36c-9,0-16.91-5-19.44-14.6h0l-22-76.19s-2.37-9.2-6-10.65h45.51Zm204.49,0c-3.58,1.45-6,10.65-6,10.65l-22,76.19c-2.54,9.56-10.46,14.6-19.44,14.6H1029.4c3.45-.62,7.24-10.73,7.24-10.73l24.52-75.86c3.46-11.59,9.34-14.85,18.32-14.85Zm-97.83,0V850.72H972.83V749.28Z' transform='translate(1.25 -70)' style='fill: #da1710; fill-rule: evenodd'/> </g> </g> <g mask='url(#maskP2)'> <circle id='pieChange3' cx='1001.25' cy='1001.25' r='1000' style=' stroke: #991ad6; stroke-miterlimit: 10; stroke-width: 2000px; '/> <g id='logoChange3'> <path d='M920.51,749.28c9,0,14.86,3.26,18.34,14.85h0L963.35,840s3.79,10.11,7.25,10.73H922.36c-9,0-16.91-5-19.44-14.6h0l-22-76.19s-2.37-9.2-6-10.65h45.51Zm204.49,0c-3.58,1.45-6,10.65-6,10.65l-22,76.19c-2.54,9.56-10.46,14.6-19.44,14.6H1029.4c3.45-.62,7.24-10.73,7.24-10.73l24.52-75.86c3.46-11.59,9.34-14.85,18.32-14.85Zm-97.83,0V850.72H972.83V749.28Z' transform='translate(1.25 -70)' style='fill: #da1710; fill-rule: evenodd'/> </g> </g> </svg> </div></div></a> <script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script> <script>!function(e,t){'object'==typeof exports&&'undefined'!=typeof module?t(exports):'function'==typeof define&&define.amd?define(['exports'],t):t((e=e||self).window=e.window||{})}(this,function(e){'use strict';function i(){return'undefined'!=typeof window}function j(){return a||i()&&(a=window.gsap)&&a.registerPlugin&&a}function m(e){return Math.round(1e4*e)/1e4}function n(e){return parseFloat(e)||0}function o(e,t){var r=n(e);return~e.indexOf('%')?r/100*t:r}function p(e,t){return n(e.getAttribute(t))}function r(e,t,r,i,s,o){return P(Math.pow((n(r)-n(e))*s,2)+Math.pow((n(i)-n(t))*o,2))}function s(e){return console.warn(e)}function t(e){return'non-scaling-stroke'===e.getAttribute('vector-effect')}function w(e){if(!(e=v(e)[0]))return 0;var n,i,o,a,f,h,d,l=e.tagName.toLowerCase(),u=e.style,c=1,g=1;t(e)&&(g=e.getScreenCTM(),c=P(g.a*g.a+g.b*g.b),g=P(g.d*g.d+g.c*g.c));try{i=e.getBBox()}catch(e){s('Some browsers wont measure invisible elements (like display:none or masks inside defs).')}var _=i||{x:0,y:0,width:0,height:0},y=_.x,w=_.y,x=_.width,m=_.height;if(i&&(x||m)||!k[l]||(x=p(e,k[l][0]),m=p(e,k[l][1]),'rect'!==l&&'line'!==l&&(x*=2,m*=2),'line'===l&&(y=p(e,'x1'),w=p(e,'y1'),x=Math.abs(x-y),m=Math.abs(m-w))),'path'===l)a=u.strokeDasharray,u.strokeDasharray='none',n=e.getTotalLength()||0,c!==g&&s('Warning: <path> length cannot be measured when vector-effect is non-scaling-stroke and the element isnt proportionally scaled.'),n*=(c+g)/2,u.strokeDasharray=a;else if('rect'===l)n=2*x*c+2*m*g;else if('line'===l)n=r(y,w,y+x,w+m,c,g);else if('polyline'===l||'polygon'===l)for(o=e.getAttribute('points').match(b)||[],'polygon'===l&&o.push(o[0],o[1]),n=0,f=2;f<o.length;f+=2)n+=r(o[f-2],o[f-1],o[f],o[f+1],c,g)||0;else'circle'!==l&&'ellipse'!==l||(h=x/2*c,d=m/2*g,n=Math.PI*(3*(h+d)-P((3*h+d)*(h+3*d))));return n||0}function x(e,t){if(!(e=v(e)[0]))return[0,0];t=t||w(e)+1;var r=h.getComputedStyle(e),i=r.strokeDasharray||'',s=n(r.strokeDashoffset),o=i.indexOf(',');return o<0&&(o=i.indexOf(' ')),t<(i=o<0?t:n(i.substr(0,o)))&&(i=t),[-s||0,i-s||0]}function y(){i()&&(h=window,l=a=j(),v=a.utils.toArray,d=-1!==((h.navigator||{}).userAgent||'').indexOf('Edge'))}var a,v,h,d,l,b=/[-+=\.]*\d+[\.e\-\+]*\d*[e\-\+]*\d*/gi,k={rect:['width','height'],circle:['r','r'],ellipse:['rx','ry'],line:['x2','y2']},P=Math.sqrt,f={version:'3.6.0',name:'drawSVG',register:function register(e){a=e,y()},init:function init(e,r){if(!e.getBBox)return!1;l||y();var i,s,a,f=w(e);return this._style=e.style,this._target=e,r+''=='true'?r='0 100%':r?-1===(r+'').indexOf(' ')&&(r='0 '+r):r='0 0',s=function _parse(e,t,n){var r,i,s=e.indexOf(' ');return i=s<0?(r=void 0!==n?n+'':e,e):(r=e.substr(0,s),e.substr(s+1)),r=o(r,t),(i=o(i,t))<r?[i,r]:[r,i]}(r,f,(i=x(e,f))[0]),this._length=m(f),this._dash=m(i[1]-i[0]),this._offset=m(-i[0]),this._dashPT=this.add(this,'_dash',this._dash,m(s[1]-s[0])),this._offsetPT=this.add(this,'_offset',this._offset,m(-s[0])),d&&(a=h.getComputedStyle(e)).strokeLinecap!==a.strokeLinejoin&&(s=n(a.strokeMiterlimit),this.add(e.style,'strokeMiterlimit',s,s+.01)),this._live=t(e)||~(r+'').indexOf('live'),this._props.push('drawSVG'),1},render:function render(e,t){var n,r,i,s,o=t._pt,a=t._style;if(o){for(t._live&&(n=w(t._target))!==t._length&&(r=n/t._length,t._length=n,t._offsetPT.s*=r,t._offsetPT.c*=r,t._dashPT?(t._dashPT.s*=r,t._dashPT.c*=r):t._dash*=r);o;)o.r(e,o.d),o=o._next;i=t._dash||e&&1!==e&&1e-4||0,n=t._length-i+.1,s=t._offset,i&&s&&i+Math.abs(s%t._length)>t._length-.2&&(s+=s<0?.1:-.1)&&(n+=.1),a.strokeDashoffset=i?s:s+.001,a.strokeDasharray=n<.2?'none':i?i+'px,'+n+'px':'0px, 999999px'}},getLength:w,getPosition:x};j()&&a.registerPlugin(f),e.DrawSVGPlugin=f,e.default=f;if (typeof(window)==='undefined'||window!==e){Object.defineProperty(e,'__esModule',{value:!0})}else{delete e.default}}); </script> <script>(function (){window.onload=function (){initBanner();}; function initBanner(){gsap.registerPlugin(DrawSVGPlugin); tl=new TimelineLite({repeat: 2, repeatDelay: 2, onComplete: function (){},}); TweenLite.defaultEase=Cubic.easeInOut; showFrames(tl);}function generateFrame0(){var tl=new TimelineLite(); tl.addLabel('startf0'); tl.add( TweenLite.to('.hand', 0.25,{x: -10, y: -90, ease: 'none'}), 'startf0+=.5' ); tl.add( TweenLite.to('.hand', 0.25,{x: 40, y: -10, ease: 'none'}), '>' ); tl.add( TweenLite.to('.dolar', 0.35,{autoAlpha: 0, ease: 'none'}), '<' ); tl.add( TweenLite.to('.l_5', 0.35,{autoAlpha: 0, ease: 'none'}), '<' ); tl.add( TweenLite.to('.hand', 0.25,{x: 30, y: -90, ease: 'none'}), '>' ); tl.add( TweenLite.to('.hand', 0.25,{x: 65, y: -10, ease: 'none'}), '>' ); tl.add( TweenLite.to('.l_f', 0.35,{autoAlpha: 0, ease: 'none'}), '<' ); tl.add( TweenLite.to('.hand', 0.25,{x: 75, y: -90, ease: 'none'}), '>' ); tl.add( TweenLite.to('.hand', 0.45,{x: 115, y: 90, ease: 'none'}), '>' ); tl.add( TweenLite.to('.l_e1', 0.25,{autoAlpha: 0, ease: 'none'}), '<' ); tl.add( TweenLite.to('.l_e2', 0.25,{autoAlpha: 0, ease: 'none'}), '<' ); return tl;}function generateChopper(){gsap.set('circle',{transformOrigin: 'center center'}); var tl=new TimelineLite(); tl.addLabel('startChopper'); tl.add( TweenLite.fromTo( '#pie1', 3,{rotation: '-180', drawSVG: '0%', ease: 'sine.inOut'},{rotation: '0', drawSVG: '50%', ease: 'sine.inOut'}), 'startChopper+=.5' ); tl.add( TweenLite.fromTo( '#pie2', 3,{rotation: '-180', drawSVG: '0%', ease: 'sine.inOut'},{rotation: '0', drawSVG: '50%', ease: 'sine.inOut'}), 'startChopper+=.8' ); tl.add( TweenLite.to('#logoChange2', 1.5,{scale: 0.9, transformOrigin: 'center center', ease: 'sine.inOut',}), 'startChopper+=1.5' ); tl.add( TweenLite.fromTo( '#pie3', 3,{rotation: '-180', drawSVG: '0%', ease: 'sine.inOut'},{rotation: '0', drawSVG: '50%', ease: 'sine.inOut'}), 'startChopper+=1.1' ); tl.add( TweenLite.fromTo( '#logoChange3', 1.5,{scale: 0.8, transformOrigin: 'center center', ease: 'sine.inOut',},{scale: 0.6, ease: 'sine.inOut'}), 'startChopper+=2' ); return tl;}function generateFrame1(){var tl=new TimelineLite(); tl.addLabel('startf1'); tl.add( TweenLite.from('.cover', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), 'startChopper-=.5' ); tl.add( TweenLite.from('.purple_stripe', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), '<' ); tl.add( TweenLite.from('.logo_w', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), '<' ); tl.add( TweenLite.from('.title', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), '<' ); tl.add( TweenLite.from('.copy', 1,{autoAlpha: 0, ease: Strong.easeInOut,}), '<' ); tl.add( TweenLite.from('.cta', 1,{autoAlpha: 0, ease: Strong.easeInOut}), '<' ); return tl;}function showFrames(tl){var addedtime=0.3; var frameInterval=1.5 + addedtime; var aniSpeed=1.5, aniSpeedSlow=aniSpeed + 0.5, aniSpeedFast=aniSpeed - 0.5; var loopInterval=2; tl.add('FrameStart0'); tl.add(generateFrame0(), 'FrameStart0+=.5'); tl.add('FrameStartChopper'); tl.add(generateChopper()); tl.add('FrameStart1'); tl.add(generateFrame1(), 'FrameStart1-=2.2'); document.getElementsByClassName('scene0')[0].style.display='block'; document.getElementsByClassName('scene1')[0].style.display='block';}})(); </script> </body></html>"
}

JSON：字符串错误

JSON: Bad String

javascript

string

serialization

json