How to use writeCode method in taiko

Best JavaScript code snippet using taiko

jianjie.js

Source:jianjie.js Github

copy

Full Screen

1$(function() {2 var c = new Coder("style-text");3 c.load("<p><div class='bef_comment writecode'>/**</div>");4 c.load("<div class='bef_comment writecode'>&nbsp;*</div>");5 c.load("<div class='bef_comment writecode'>&nbsp;*欢迎你,我的朋友。我叫水瓶座,是个还算年轻的菜鸟前端</div>");6 c.load("<div class='bef_comment writecode'>&nbsp;*取个星座名,并非妄自尊称,纯属卖萌o( ̄▽ ̄)d</div>",2000);7 c.load("<div class='bef_comment writecode'>&nbsp;*本站建于2018-12-09</div>");8 c.load("<div class='bef_comment writecode'>&nbsp;*感谢码云!</div>");9 c.load("<div class='bef_comment writecode'>&nbsp;*感谢码云!</div>");10 c.load("<div class='bef_comment writecode'>&nbsp;*感谢码云!</div>");11 c.load("<div class='bef_comment writecode'>&nbsp;*好了重要的事情说三遍,看看我能做些什么</div>");12 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");13 c.load("<p><div class='bef_comment writecode'>/**</div>");14 c.load("<div class='bef_comment writecode'>&nbsp;*让我们开始吧,我们先来让所有的变化都以动画的效果来显示</div>");15 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");16 c.load("<p><div class='code writecode'><span class='bef_selector'>*</span> {</div>");17 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>-webkit-transition</span>: <span class='bef_value'> all 1s</span>;</div>");18 c.load("<div class='code writecode'>}</div></p>");19 c.load("<p><div class='bef_comment writecode'>/**</div>");20 c.load("<div class='bef_comment writecode'>&nbsp;*看起来似乎没什么变化,不要着急,接下来你就会看到</div>");21 c.load("<div class='bef_comment writecode'>&nbsp;*你是不是厌倦了白底黑字</div>");22 c.load("<div class='bef_comment writecode'>&nbsp;*那么让我们来做一些改变</div>");23 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");24 c.load("<p><div class='code writecode'><span class='bef_selector'>html</span> {</div>");25 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>background</span>: <span class='bef_value'>rgb(63, 82, 99)</span>;</div>");26 c.setClass("html", [{27 "name": "background",28 "val": "rgb(63, 82, 99)"29 }]);30 c.load("<div class='code writecode'>}</div></p>");31 c.load("<p><div class='bef_comment writecode'>/**</div>");32 c.load("<div class='bef_comment writecode'>&nbsp;*稍等,我们来改变一下字体的颜色</div>");33 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");34 c.load("<p><div class='code writecode'><span class='bef_selector'>pre,a</span> {</div>");35 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>color</span>: <span class='bef_value'>white</span>;</div>");36 c.setClass("pre,a", [{37 "name": "color",38 "val": "white"39 }]);40 c.load("<div class='code writecode'>}</div></p>");41 c.load("<p><div class='bef_comment writecode'>/**</div>");42 c.load("<div class='bef_comment writecode'>&nbsp;*现在看起来好多了</div>");43 c.load("<div class='bef_comment writecode'>&nbsp;*在这整个页面里写代码让人有些不舒服</div>");44 c.load("<div class='bef_comment writecode'>&nbsp;*我准备创建一个区域来更好的显示我的代码</div>");45 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");46 c.load("<p><div class='code writecode'><span class='bef_selector'>pre</span><span class='bef_key'>:not(:empty)</span> {</div>");47 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>overflow</span>: <span class='bef_value'>hidden</span>;</div>");48 c.setClass("pre:not(:empty)", [{49 "name": "overflow",50 "val": "hidden"51 }]);52 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>background</span>: <span class='bef_value'>rgb(48, 48, 48)</span>;</div>");53 c.setClass("pre:not(:empty)", [{54 "name": "background",55 "val": "rgb(48, 48, 48)"56 }]);57 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>border</span>: <span class='bef_value'>1px solid #ccc</span>;</div>");58 c.setClass("pre:not(:empty)", [{59 "name": "border",60 "val": "1px solid #ccc"61 }]);62 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>max-height</span>: <span class='bef_value'>44.6%</span>;</div>");63 c.setClass("pre:not(:empty)", [{64 "name": "max-height",65 "val": "44.6%"66 }]);67 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>width</span>: <span class='bef_value'>49%</span>;</div>");68 c.setClass("pre:not(:empty)", [{69 "name": "width",70 "val": "49%"71 }]);72 $('#pre:not(:empty)').addClass("toarea");73 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>font-size</span>: <span class='bef_value'>14<span class='bef_px'>px</span></span>;</div>");74 c.setClass("pre:not(:empty)", [{75 "name": "font-size",76 "val": "14px"77 }]);78 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>font-family</span>: <span class='bef_value'>monospace</span>;</div>");79 c.setClass("pre:not(:empty)", [{80 "name": "font-family",81 "val": "monospace"82 }]);83 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>padding</span>: <span class='bef_value'>10<span class='bef_px'>px</span> 10<span class='bef_px'>px</span> 20<span class='bef_px'>px</span></span>;</div>");84 c.setClass("pre:not(:empty)", [{85 "name": "padding",86 "val": "10px 10px 20px"87 }]);88 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>box-shadow</span>: <span class='bef_value'>-4<span class='bef_px'>px</span> 4<span class='bef_px'>px</span> 2<span class='bef_px'>px</span> 0 rgba(0,0,0,0.3)</span>;</div>");89 c.setClass("pre:not(:empty)", [{90 "name": "box-shadow",91 "val": "-4px 4px 2px 0 rgba(0,0,0,0.3)"92 }]);93 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>white-space</span>: <span class='bef_value'>pre-wrap</span>;</div>");94 c.setClass("pre:not(:empty)", [{95 "name": "white-space",96 "val": "pre-wrap"97 }]);98 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>outline</span>: <span class='bef_value'>0</span>;</div>");99 c.setClass("pre:not(:empty)", [{100 "name": "outline",101 "val": "0"102 }]);103 c.load("<div class='code writecode'>}</div></p>");104 c.load("<p><div class='bef_comment writecode'>/**</div>");105 c.load("<div class='bef_comment writecode'>&nbsp;*OK,现在让我们来换一下位置</div>");106 c.load("<div class='bef_comment writecode'>&nbsp;*让我们准备来再做一些改变</div>");107 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");108 c.load("<p><div class='code writecode'><span class='bef_selector'>#style-text</span> {</div>");109 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>-webkit-transform</span>: <span class='bef_value'>translateX(95%)</span>;</div>");110 c.setClass("#style-text", [{111 "name": "-webkit-transform",112 "val": "translateX(95%)"113 }]);114 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>position</span>: <span class='bef_value'>absolute</span>;</div>");115 c.setClass("#style-text", [{116 "name": "position",117 "val": "absolute"118 }]);119 c.load("<div class='code writecode'>}</div></p>");120 c.load("<p><div class='bef_comment writecode'>/**</div>");121 c.load("<div class='bef_comment writecode'>&nbsp;*现在看起来好多了,但是所有的文字颜色都是白色的</div>");122 c.load("<div class='bef_comment writecode'>&nbsp;*让我们来让他的可读性更好一点吧</div>");123 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");124 c.load("<p><div class='code writecode'><span class='bef_selector'>.comment</span>&nbsp;{ <span class='bef_key'>color</span>: <span class='bef_value'>#857F6B</span>; <span class='bef_key'>font-style</span>: <span class='bef_value'>italic</span>; }</div>");125 c.addClass(".bef_comment","comment");126 c.load("<div class='code writecode'><span class='bef_selector'>.selector</span>&nbsp;{ <span class='bef_key'>color</span>: <span class='bef_value'>#E69F0F</span>; }</div>");127 c.addClass(".bef_selector","selector");128 c.load("<div class='code writecode'><span class='selector'>.selector .key</span>&nbsp;{ <span class='bef_key'>color</span>: <span class='bef_value'>#64D5EA</span>; }</div>");129 c.addClass(".bef_key","key");130 c.load("<div class='code writecode'><span class='selector'>.key</span>&nbsp;{ <span class='key'>color</span>: <span class='bef_value'>#64D5EA</span>; }</div>");131 c.load("<div class='code writecode'><span class='selector'>.value</span>&nbsp;{ <span class='key'>color</span>: <span class='bef_value'>#BE84F2</span>; }</div>");132 c.addClass(".bef_value","value");133 c.load("<div class='code writecode'><span class='selector'>.value.px</span>&nbsp;{ <span class='key'>color</span>: <span class='value'>#F92772</span>; }</div></p>");134 c.addClass(".value .bef_px","px");135 c.load("<p><div class='comment writecode'>/**</div>");136 c.load("<div class='comment writecode'>&nbsp;*现在我们差不多都准备好了</div>");137 c.load("<div class='comment writecode'>&nbsp;*让我们最后再来做一些3D旋转</div>");138 c.load("<div class='comment writecode'>&nbsp;*/</div></p>");139 c.load("<p><div class='code writecode'><span class='selector'>#content</span> {</div>");140 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-perspective</span>: <span class='value'>1000<span class='px'>px</span></span>;</div>");141 c.setClass("#content", [{142 "name": "-webkit-perspective",143 "val": "1000px"144 }]);145 c.load("<div class='code writecode'>}</div></p>");146 c.load("<p><div class='code writecode'><span class='selector'>#style-text</span> {</div>");147 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-transform</span>: <span class='value'>translateX(98.5%) rotateY(-10deg)</span>;</div>");148 c.setClass("#style-text", [{149 "name": "-webkit-transform",150 "val": "translateX(98.5%) rotateY(-10deg)"151 }]);152 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-transform-origin</span>: <span class='value'>right</span>;</div>");153 c.setClass("#style-text", [{154 "name": "-webkit-transform-origin",155 "val": "right"156 }]);157 c.load("<div class='code writecode'>&nbsp;<span class='key'>max-height</span>: <span class='value'>94.5%</span>;</div>");158 c.setClass("#style-text", [{159 "name": "max-height",160 "val": "94.5%"161 }]);162 c.load("<div class='code writecode'>}</div></p>");163 c.load("<p><div class='comment writecode'>/**</div>");164 c.load("<div class='comment writecode'>&nbsp;*现在我们差不多可以开始写我的简历了</div>");165 c.load("<div class='comment writecode'>&nbsp;*我相信你来这不只是为了看这些漂亮的颜色</div>");166 c.load("<div class='comment writecode'>&nbsp;*/</div></p>");167 c.addClass("#work-text","pre_work-text");168 c.load("<p><div class='code writecode'><span class='selector'>pre</span><span class='key'>:not(#style-text)</span> { </div>");169 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-transform</span>: <span class='value'>rotateY(10deg)</span>;</div>");170 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-transform-origin</span>: <span class='value'>left</span>;</div>");171 c.load("<div class='code writecode'>}</div></p>");172 var r = new Coder("work-text");173 r.load("<div id='md'></div>");174 var w = new Coder("md");175 w.load("<h1 class='writecode'>简历</h1>");176 w.load("<p><div class='writecode'>Shui Ping</div>");177 w.load("<div class='writecode'>Single dog</div>");178 w.load("<div class='writecode'>水瓶座、热爱网络的菜鸟前端</div></p>");179 w.load("<h1 class='writecode'>联系</h1>");180 w.load("<ul>");181 w.load("<li class='writecode'>Mail:<a href='' target='_blank'>没有,哈哈</li>");182 w.load("<li class='writecode'>Blog:<a href='https://yked.gitee.io/cai/' target='_blank'>yked.gitee.io/cai/</a></li>");183 w.load("</ul>");184 w.load("<h1 class='writecode'>技能</h1>");185 w.load("<ul>");186 w.load("<li class='writecode'>能用html+css+javascript日常开发</li>");187 w.load("<li class='writecode'>会用易语言,易安卓进行软件开发</li>");188 w.load("<li class='writecode'>会用python做点懒得做的事</li>");189 w.load("<li class='writecode'>对Windows情有独钟</li>");190 w.load("<li class='writecode'>会吹牛逼,还贼6</li>");191 w.load("<li class='writecode'>while(alive)</li>");192 w.load("<li class='writecode'>{</li>");193 w.load("<li class='writecode'>&nbsp;&nbsp;&nbsp;&nbsp;eat;</li>");194 w.load("<li class='writecode'>&nbsp;&nbsp;&nbsp;&nbsp;study;</li>");195 w.load("<li class='writecode'>&nbsp;&nbsp;&nbsp;&nbsp;sleep();</li>");196 w.load("<li class='writecode'>}</li>");197 w.load("</ul>");198 w.load("<h1 class='writecode'>程序猿</h1>");199 w.load("<ul>");200 w.load("<li class='writecode'>写字楼里写字间,写字间里程序员</li>");201 w.load("<li class='writecode'>程序人员写程序,又拿程序换酒钱</li>");202 w.load("<li class='writecode'>酒醒只在网上坐,酒醉还来网下眠</li>");203 w.load("<li class='writecode'>酒醉酒醒日复日,网上网下年复年</li>");204 w.load("<li class='writecode'>但愿老死电脑间,不愿鞠躬老板前</li>");205 w.load("<li class='writecode'>奔驰宝马贵者趣,公交自行程序员</li>");206 w.load("</ul>");207 w.load("<h2 class='writecode'>补充</h2>");208 w.load("<li class='writecode'>本人擅长Ai、Fw、Fl、Br、 Ae、Pr、Id、Ps等软件的安装与卸载,</li>");209 w.load("<li class='writecode'>精通 CSS、JavaScript、PHP、ASP、C、C++、 C#、Java、Ruby、Perl、</li>");210 w.load("<li class='writecode'>Lisp、python、等单词拼 写,熟悉Windows、Linux、Mac、 Android、IOS等系统的开关机</li>");211 w.load("</ul>");212 213 c.load("<p><div class='comment writecode'>/**</div>");214 c.load("<div class='comment writecode'>&nbsp;*左面的简历看起来不是太令人满意,让我们先给他来点动态渲染</div>");215 c.load("<div class='comment writecode'>&nbsp;*/</div></p>");216 c.load("<p><div class='code writecode'><span class='selector'>#work-text</span> { </div>");217 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-transform</span>: <span class='value'>rotateX(0deg) rotateY(190deg) rotateZ(180deg)</span>;</div>");218 c.load("<div class='code writecode'>}</div></p>");219 c.load("<p><div class='code writecode'><span class='selector'>#work-text #md</span> { </div>");220 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-transform</span>: <span class='value'>rotateY(190deg) rotateZ(180deg)</span>;</div>");221 c.load("<div class='code writecode'>}</div></p>");222 c.load("<p><div class='comment writecode'>/**</div>");223 c.load("<div class='comment writecode'>&nbsp;*好了,让我们准备</div>");224 c.load("<div class='comment writecode'>&nbsp;*</div>");225 c.load("<div class='comment writecode'>&nbsp;*3....</div>");226 c.load("<div class='comment writecode'>&nbsp;*2....</div>");227 c.load("<div class='comment writecode'>&nbsp;*1....</div>");228 c.load("<div class='comment writecode'>&nbsp;*</div>");229 c.load("<div class='comment writecode'>&nbsp;*.</div>");230 c.load("<div class='comment writecode'>&nbsp;*</div>");231 c.load("<div class='comment writecode'>&nbsp;*差不多了,让我们的简历动起来!</div>");232 c.load("<div class='comment writecode'>&nbsp;*/</div></p>");233 c.setClass("#work-text", [{234 "name": "-webkit-transform",235 "val": "rotateX(0deg) rotateY(190deg) rotateZ(180deg)"236 }]);237 c.setClass("#work-text #md", [{238 "name": "-webkit-transform",239 "val": "rotateY(190deg) rotateZ(180deg)"240 }]);241 c.load("<p><div class='comment writecode'>/**</div>");242 c.load("<div class='comment writecode'>&nbsp;*对于文本,我们可以再做一点微调</div>");243 c.load("<div class='comment writecode'>&nbsp;*/</div></p>");244 c.load("<p><div class='code writecode'><span class='selector'>#md</span> { </div>");245 c.load("<div class='code writecode'>&nbsp;<span class='key'>font-family</span>: <span class='value'>'Helvetica Neue', Helvetica, sans-serif</span>;</div>");246 c.setClass("#md", [{247 "name": "font-family",248 "val": "'Helvetica Neue', Helvetica, sans-serif"249 }]);250 c.load("<div class='code writecode'>}</div></p>");251 c.load("<p><div class='code writecode'><span class='selector'>#md h1</span> { </div>");252 c.load("<div class='code writecode'>&nbsp;<span class='key'>border-bottom</span>: <span class='value'>1px solid #ccc</span>;</div>");253 c.setClass("#md h1", [{254 "name": "border-bottom",255 "val": "1px solid #ccc"256 }]);257 c.load("<div class='code writecode'>&nbsp;<span class='key'>padding-bottom</span>: <span class='value'>5px</span>;</div>");258 c.setClass("#md h1", [{259 "name": "padding-bottom",260 "val": "5px"261 }]);262 c.load("<div class='code writecode'>}</div></p>");263 c.load("<p><div class='code writecode'><span class='selector'>#md li</span> { </div>");264 c.load("<div class='code writecode'>&nbsp;<span class='key'>margin</span>: <span class='value'>5<span class='px'>px</span> 0</span>;</div>");265 c.setClass("#md li", [{266 "name": "margin",267 "val": "5px 0"268 }]);269 c.load("<div class='code writecode'>}</div></p>");270 c.load("<p><div class='code writecode'><span class='selector'>#md h1,#md ul</span> { </div>");271 c.load("<div class='code writecode'>&nbsp;<span class='key'>margin</span>: <span class='value'>0</span>;</div>");272 c.setClass("#md h1,#md ul", [{273 "name": "margin",274 "val": "0"275 }]);276 c.load("<div class='code writecode'>}</div></p>");277 c.load("<p><div class='comment writecode'>/**</div>");278 c.load("<div class='comment writecode'>&nbsp;*这样基本上就差不多了</div>");279 c.load("<div class='comment writecode'>&nbsp;*");280 c.load("<div class='comment writecode'>&nbsp;*如果你想和我联系</div>");281 c.load("<div class='comment writecode'>&nbsp;*我劝你还是别想了</div>");282 c.load("<div class='comment writecode'>&nbsp;*真的,别想了</div>");283 c.load("<div class='comment writecode'>&nbsp;*最后非常感谢您愿意花3分钟看完我的简历!鞠躬!!!</div>");284 c.load("<div class='comment writecode'>&nbsp;*/</div></p>");285});286var m = 0;287var Coder = function(dom) {288 this._dom = dom;289};290Coder.prototype = {291 constructor: Coder,292 load: function(code, second) {293 var dom = this._dom;294 var o = this;295 var _second = second ? second : 1000;296 _second = m + _second;297 setTimeout(function() {298 $('#' + dom).scrollTop( $('#' + dom)[0].scrollHeight );299 $("#" + dom).append(code);300 }, _second);301 m = _second;302 },303 setClass: function(dom, styles,second) {304 var _second = second ? second : 0;305 _second = m + _second;306 for (var i in styles) {307 setTimeout(function() {308 $(dom).css(styles[i].name, styles[i].val);309 }, _second);310 }311 m = _second;312 },313 addClass:function(dom,className){314 var second = m;315 setTimeout(function() {316 $(dom).addClass(className);317 }, second);318 }...

Full Screen

Full Screen

index.js

Source:index.js Github

copy

Full Screen

1$(function() {2 var c = new Coder("style-text");3 c.load("<p><div class='bef_comment writecode'>/**</div>");4 c.load("<div class='bef_comment writecode'>&nbsp;*</div>");5 c.load("<div class='bef_comment writecode'>&nbsp;*hi,我的名字叫陈辰,是上海一家互联网创业公司的软件工程师</div>");6 c.load("<div class='bef_comment writecode'>&nbsp;*我的主要工作是解决用户的交互体验</div>",2000);7 c.load("<div class='bef_comment writecode'>&nbsp;*让我们来点实际的,看看我能做些什么</div>");8 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");9 c.load("<p><div class='bef_comment writecode'>/**</div>");10 c.load("<div class='bef_comment writecode'>&nbsp;*让我们开始吧,我们先来让所有的变化都以动画的效果来显示</div>");11 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");12 c.load("<p><div class='code writecode'><span class='bef_selector'>*</span> {</div>");13 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>-webkit-transition</span>: <span class='bef_value'> all 1s</span>;</div>");14 c.load("<div class='code writecode'>}</div></p>");15 c.load("<p><div class='bef_comment writecode'>/**</div>");16 c.load("<div class='bef_comment writecode'>&nbsp;*看起来似乎没什么变化,不要着急,接下来你就会看到</div>");17 c.load("<div class='bef_comment writecode'>&nbsp;*你是不是厌倦了白底黑字</div>");18 c.load("<div class='bef_comment writecode'>&nbsp;*那么让我们来做一些改变</div>");19 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");20 c.load("<p><div class='code writecode'><span class='bef_selector'>html</span> {</div>");21 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>background</span>: <span class='bef_value'>rgb(63, 82, 99)</span>;</div>");22 c.setClass("html", [{23 "name": "background",24 "val": "rgb(63, 82, 99)"25 }]);26 c.load("<div class='code writecode'>}</div></p>");27 c.load("<p><div class='bef_comment writecode'>/**</div>");28 c.load("<div class='bef_comment writecode'>&nbsp;*稍等,我们来改变一下字体的颜色</div>");29 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");30 c.load("<p><div class='code writecode'><span class='bef_selector'>pre,a</span> {</div>");31 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>color</span>: <span class='bef_value'>white</span>;</div>");32 c.setClass("pre,a", [{33 "name": "color",34 "val": "white"35 }]);36 c.load("<div class='code writecode'>}</div></p>");37 c.load("<p><div class='bef_comment writecode'>/**</div>");38 c.load("<div class='bef_comment writecode'>&nbsp;*现在看起来好多了</div>");39 c.load("<div class='bef_comment writecode'>&nbsp;*在这整个页面里写代码让人有些不舒服</div>");40 c.load("<div class='bef_comment writecode'>&nbsp;*我准备创建一个区域来更好的显示我的代码</div>");41 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");42 c.load("<p><div class='code writecode'><span class='bef_selector'>pre</span><span class='bef_key'>:not(:empty)</span> {</div>");43 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>overflow</span>: <span class='bef_value'>hidden</span>;</div>");44 c.setClass("pre:not(:empty)", [{45 "name": "overflow",46 "val": "hidden"47 }]);48 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>background</span>: <span class='bef_value'>rgb(48, 48, 48)</span>;</div>");49 c.setClass("pre:not(:empty)", [{50 "name": "background",51 "val": "rgb(48, 48, 48)"52 }]);53 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>border</span>: <span class='bef_value'>1px solid #ccc</span>;</div>");54 c.setClass("pre:not(:empty)", [{55 "name": "border",56 "val": "1px solid #ccc"57 }]);58 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>max-height</span>: <span class='bef_value'>44.6%</span>;</div>");59 c.setClass("pre:not(:empty)", [{60 "name": "max-height",61 "val": "44.6%"62 }]);63 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>width</span>: <span class='bef_value'>49%</span>;</div>");64 c.setClass("pre:not(:empty)", [{65 "name": "width",66 "val": "49%"67 }]);68 $('#pre:not(:empty)').addClass("toarea");69 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>font-size</span>: <span class='bef_value'>14<span class='bef_px'>px</span></span>;</div>");70 c.setClass("pre:not(:empty)", [{71 "name": "font-size",72 "val": "14px"73 }]);74 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>font-family</span>: <span class='bef_value'>monospace</span>;</div>");75 c.setClass("pre:not(:empty)", [{76 "name": "font-family",77 "val": "monospace"78 }]);79 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>padding</span>: <span class='bef_value'>10<span class='bef_px'>px</span> 10<span class='bef_px'>px</span> 20<span class='bef_px'>px</span></span>;</div>");80 c.setClass("pre:not(:empty)", [{81 "name": "padding",82 "val": "10px 10px 20px"83 }]);84 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>box-shadow</span>: <span class='bef_value'>-4<span class='bef_px'>px</span> 4<span class='bef_px'>px</span> 2<span class='bef_px'>px</span> 0 rgba(0,0,0,0.3)</span>;</div>");85 c.setClass("pre:not(:empty)", [{86 "name": "box-shadow",87 "val": "-4px 4px 2px 0 rgba(0,0,0,0.3)"88 }]);89 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>white-space</span>: <span class='bef_value'>pre-wrap</span>;</div>");90 c.setClass("pre:not(:empty)", [{91 "name": "white-space",92 "val": "pre-wrap"93 }]);94 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>outline</span>: <span class='bef_value'>0</span>;</div>");95 c.setClass("pre:not(:empty)", [{96 "name": "outline",97 "val": "0"98 }]);99 c.load("<div class='code writecode'>}</div></p>");100 c.load("<p><div class='bef_comment writecode'>/**</div>");101 c.load("<div class='bef_comment writecode'>&nbsp;*OK,现在让我们来换一下位置</div>");102 c.load("<div class='bef_comment writecode'>&nbsp;*让我们准备来再做一些改变</div>");103 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");104 c.load("<p><div class='code writecode'><span class='bef_selector'>#style-text</span> {</div>");105 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>-webkit-transform</span>: <span class='bef_value'>translateX(95%)</span>;</div>");106 c.setClass("#style-text", [{107 "name": "-webkit-transform",108 "val": "translateX(95%)"109 }]);110 c.load("<div class='code writecode'>&nbsp;<span class='bef_key'>position</span>: <span class='bef_value'>absolute</span>;</div>");111 c.setClass("#style-text", [{112 "name": "position",113 "val": "absolute"114 }]);115 c.load("<div class='code writecode'>}</div></p>");116 c.load("<p><div class='bef_comment writecode'>/**</div>");117 c.load("<div class='bef_comment writecode'>&nbsp;*现在看起来好多了,但是所有的文字颜色都是白色的</div>");118 c.load("<div class='bef_comment writecode'>&nbsp;*让我们来让他的可读性更好一点吧</div>");119 c.load("<div class='bef_comment writecode'>&nbsp;*/</div></p>");120 c.load("<p><div class='code writecode'><span class='bef_selector'>.comment</span>&nbsp;{ <span class='bef_key'>color</span>: <span class='bef_value'>#857F6B</span>; <span class='bef_key'>font-style</span>: <span class='bef_value'>italic</span>; }</div>");121 c.addClass(".bef_comment","comment");122 c.load("<div class='code writecode'><span class='bef_selector'>.selector</span>&nbsp;{ <span class='bef_key'>color</span>: <span class='bef_value'>#E69F0F</span>; }</div>");123 c.addClass(".bef_selector","selector");124 c.load("<div class='code writecode'><span class='selector'>.selector .key</span>&nbsp;{ <span class='bef_key'>color</span>: <span class='bef_value'>#64D5EA</span>; }</div>");125 c.addClass(".bef_key","key");126 c.load("<div class='code writecode'><span class='selector'>.key</span>&nbsp;{ <span class='key'>color</span>: <span class='bef_value'>#64D5EA</span>; }</div>");127 c.load("<div class='code writecode'><span class='selector'>.value</span>&nbsp;{ <span class='key'>color</span>: <span class='bef_value'>#BE84F2</span>; }</div>");128 c.addClass(".bef_value","value");129 c.load("<div class='code writecode'><span class='selector'>.value.px</span>&nbsp;{ <span class='key'>color</span>: <span class='value'>#F92772</span>; }</div></p>");130 c.addClass(".value .bef_px","px");131 c.load("<p><div class='comment writecode'>/**</div>");132 c.load("<div class='comment writecode'>&nbsp;*现在我们差不多都准备好了</div>");133 c.load("<div class='comment writecode'>&nbsp;*让我们最后再来做一些3D旋转</div>");134 c.load("<div class='comment writecode'>&nbsp;*/</div></p>");135 c.load("<p><div class='code writecode'><span class='selector'>#content</span> {</div>");136 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-perspective</span>: <span class='value'>1000<span class='px'>px</span></span>;</div>");137 c.setClass("#content", [{138 "name": "-webkit-perspective",139 "val": "1000px"140 }]);141 c.load("<div class='code writecode'>}</div></p>");142 c.load("<p><div class='code writecode'><span class='selector'>#style-text</span> {</div>");143 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-transform</span>: <span class='value'>translateX(98.5%) rotateY(-10deg)</span>;</div>");144 c.setClass("#style-text", [{145 "name": "-webkit-transform",146 "val": "translateX(98.5%) rotateY(-10deg)"147 }]);148 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-transform-origin</span>: <span class='value'>right</span>;</div>");149 c.setClass("#style-text", [{150 "name": "-webkit-transform-origin",151 "val": "right"152 }]);153 c.load("<div class='code writecode'>&nbsp;<span class='key'>max-height</span>: <span class='value'>94.5%</span>;</div>");154 c.setClass("#style-text", [{155 "name": "max-height",156 "val": "94.5%"157 }]);158 c.load("<div class='code writecode'>}</div></p>");159 c.load("<p><div class='comment writecode'>/**</div>");160 c.load("<div class='comment writecode'>&nbsp;*现在我们差不多可以开始写我的简历了</div>");161 c.load("<div class='comment writecode'>&nbsp;*我相信你来这不只是为了看这些漂亮的颜色</div>");162 c.load("<div class='comment writecode'>&nbsp;*/</div></p>");163 c.addClass("#work-text","pre_work-text");164 c.load("<p><div class='code writecode'><span class='selector'>pre</span><span class='key'>:not(#style-text)</span> { </div>");165 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-transform</span>: <span class='value'>rotateY(10deg)</span>;</div>");166 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-transform-origin</span>: <span class='value'>left</span>;</div>");167 c.load("<div class='code writecode'>}</div></p>");168 var r = new Coder("work-text");169 r.load("<div id='md'></div>");170 var w = new Coder("md");171 w.load("<h1 class='writecode'>简历</h1>");172 w.load("<p><div class='writecode'>陈辰</div>");173 w.load("<div class='writecode'>软件工程师(上海荟邮网络科技有限公司)</div>");174 w.load("<div class='writecode'>前端/NodeJS 开发工程师</div></p>");175 w.load("<h1 class='writecode'>联系我</h1>");176 w.load("<ul>");177 w.load("<li class='writecode'>mail:114413511@qq.com</li>");178 w.load("<li class='writecode'>blog:<a href='http://blog.youlunshidai.com' target='_blank'>blog.youlunshidai.com</a></li>");179 w.load("<li class='writecode'>github:<a href='https://github.com/ccfromstar' target='_blank'>https://github.com/ccfromstar</a></li>");180 w.load("</ul>");181 w.load("<h1 class='writecode'>技能</h1>");182 w.load("<ul>");183 w.load("<li class='writecode'>精通Lotus/Domino开发技术,有过7年文档型数据库开发管理经验</li>");184 w.load("<li class='writecode'>熟练Nodejs技术,熟练运用express,sails,meteor框架</li>");185 w.load("<li class='writecode'>熟练各种Web前端开发技术H5,CSS3,jQuery,React,Angular</li>");186 w.load("<li class='writecode'>熟练与各平台和硬件的技术对接(如: 微信接口,三方支付,系统整合)</li>");187 w.load("<li class='writecode'>熟练Mysql,redis,mongodb和文档型数据库(domino)</li>");188 w.load("<li class='writecode'>熟练windows server,linux服务器部署和管理,及常见问题的处理</li>");189 w.load("<li class='writecode'>熟练svn,git等常用版本管理工具</li>");190 w.load("<li class='writecode'>有过BPM办公自动化流程引擎的开发经验</li>");191 w.load("</ul>");192 w.load("<h1 class='writecode'>项目</h1>");193 w.load("<ul>");194 w.load("<li class='writecode'><a href='http://www.huiyoulun.com' target='_blank'>www.huiyoulun.com</a></li>");195 w.load("<li class='writecode'><a href='http://www.youlunshidai.com' target='_blank'>www.youlunshidai.com</a></li>");196 w.load("<li class='writecode'><a href='http://wap.huiyoulun.com' target='_blank'>wap.huiyoulun.com</a></li>");197 w.load("<li class='writecode'><a href='http://www.4000191177.com' target='_blank'>www.4000191177.com</a></li>");198 w.load("<li class='writecode'><a href='http://jianianhua.youlunshidai.com/' target='_blank'>jianianhua.youlunshidai.com</a></li>");199 w.load("</ul>");200 c.load("<p><div class='comment writecode'>/**</div>");201 c.load("<div class='comment writecode'>&nbsp;*左面的简历看起来不是太令人满意,让我们先给他来点动态渲染</div>");202 c.load("<div class='comment writecode'>&nbsp;*/</div></p>");203 c.load("<p><div class='code writecode'><span class='selector'>#work-text</span> { </div>");204 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-transform</span>: <span class='value'>rotateX(0deg) rotateY(190deg) rotateZ(180deg)</span>;</div>");205 c.load("<div class='code writecode'>}</div></p>");206 c.load("<p><div class='code writecode'><span class='selector'>#work-text #md</span> { </div>");207 c.load("<div class='code writecode'>&nbsp;<span class='key'>-webkit-transform</span>: <span class='value'>rotateY(190deg) rotateZ(180deg)</span>;</div>");208 c.load("<div class='code writecode'>}</div></p>");209 c.load("<p><div class='comment writecode'>/**</div>");210 c.load("<div class='comment writecode'>&nbsp;*好了,让我们准备</div>");211 c.load("<div class='comment writecode'>&nbsp;*</div>");212 c.load("<div class='comment writecode'>&nbsp;*3....</div>");213 c.load("<div class='comment writecode'>&nbsp;*2....</div>");214 c.load("<div class='comment writecode'>&nbsp;*1....</div>");215 c.load("<div class='comment writecode'>&nbsp;*</div>");216 c.load("<div class='comment writecode'>&nbsp;*.</div>");217 c.load("<div class='comment writecode'>&nbsp;*</div>");218 c.load("<div class='comment writecode'>&nbsp;*差不多了,让我们的简历动起来!</div>");219 c.load("<div class='comment writecode'>&nbsp;*/</div></p>");220 c.setClass("#work-text", [{221 "name": "-webkit-transform",222 "val": "rotateX(0deg) rotateY(190deg) rotateZ(180deg)"223 }]);224 c.setClass("#work-text #md", [{225 "name": "-webkit-transform",226 "val": "rotateY(190deg) rotateZ(180deg)"227 }]);228 c.load("<p><div class='comment writecode'>/**</div>");229 c.load("<div class='comment writecode'>&nbsp;*对于文本,我们可以再做一点微调</div>");230 c.load("<div class='comment writecode'>&nbsp;*/</div></p>");231 c.load("<p><div class='code writecode'><span class='selector'>#md</span> { </div>");232 c.load("<div class='code writecode'>&nbsp;<span class='key'>font-family</span>: <span class='value'>'Helvetica Neue', Helvetica, sans-serif</span>;</div>");233 c.setClass("#md", [{234 "name": "font-family",235 "val": "'Helvetica Neue', Helvetica, sans-serif"236 }]);237 c.load("<div class='code writecode'>}</div></p>");238 c.load("<p><div class='code writecode'><span class='selector'>#md h1</span> { </div>");239 c.load("<div class='code writecode'>&nbsp;<span class='key'>border-bottom</span>: <span class='value'>1px solid #ccc</span>;</div>");240 c.setClass("#md h1", [{241 "name": "border-bottom",242 "val": "1px solid #ccc"243 }]);244 c.load("<div class='code writecode'>&nbsp;<span class='key'>padding-bottom</span>: <span class='value'>5px</span>;</div>");245 c.setClass("#md h1", [{246 "name": "padding-bottom",247 "val": "5px"248 }]);249 c.load("<div class='code writecode'>}</div></p>");250 c.load("<p><div class='code writecode'><span class='selector'>#md li</span> { </div>");251 c.load("<div class='code writecode'>&nbsp;<span class='key'>margin</span>: <span class='value'>5<span class='px'>px</span> 0</span>;</div>");252 c.setClass("#md li", [{253 "name": "margin",254 "val": "5px 0"255 }]);256 c.load("<div class='code writecode'>}</div></p>");257 c.load("<p><div class='code writecode'><span class='selector'>#md h1,#md ul</span> { </div>");258 c.load("<div class='code writecode'>&nbsp;<span class='key'>margin</span>: <span class='value'>0</span>;</div>");259 c.setClass("#md h1,#md ul", [{260 "name": "margin",261 "val": "0"262 }]);263 c.load("<div class='code writecode'>}</div></p>");264 c.load("<p><div class='comment writecode'>/**</div>");265 c.load("<div class='comment writecode'>&nbsp;*这样基本上就差不多了</div>");266 c.load("<div class='comment writecode'>&nbsp;*");267 c.load("<div class='comment writecode'>&nbsp;*如果你想和我联系</div>");268 c.load("<div class='comment writecode'>&nbsp;*QQ/微信:114413511</div>");269 c.load("<div class='comment writecode'>&nbsp;*mobile:13611847679</div>");270 c.load("<div class='comment writecode'>&nbsp;*最后非常感谢您愿意花3分钟看完我的简历!</div>");271 c.load("<div class='comment writecode'>&nbsp;*/</div></p>");272});273var m = 0;274var Coder = function(dom) {275 this._dom = dom;276};277Coder.prototype = {278 constructor: Coder,279 load: function(code, second) {280 var dom = this._dom;281 var o = this;282 var _second = second ? second : 1000;283 _second = m + _second;284 setTimeout(function() {285 $('#' + dom).scrollTop( $('#' + dom)[0].scrollHeight );286 $("#" + dom).append(code);287 }, _second);288 m = _second;289 },290 setClass: function(dom, styles,second) {291 var _second = second ? second : 0;292 _second = m + _second;293 for (var i in styles) {294 setTimeout(function() {295 $(dom).css(styles[i].name, styles[i].val);296 }, _second);297 }298 m = _second;299 },300 addClass:function(dom,className){301 var second = m;302 setTimeout(function() {303 $(dom).addClass(className);304 }, second);305 }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const { openBrowser, goto, write, closeBrowser } = require('taiko');2(async () => {3 try {4 await openBrowser();5 await write("Taiko", into("Search"));6 } catch (e) {7 console.error(e);8 } finally {9 await closeBrowser();10 }11})();12const { openBrowser, goto, write, closeBrowser } = require('taiko');13(async () => {14 try {15 await openBrowser();16 await write("Taiko", into("Search"));17 } catch (e) {18 console.error(e);19 } finally {20 await closeBrowser();21 }22})();23const { openBrowser, goto, write, closeBrowser } = require('taiko');24(async () => {25 try {26 await openBrowser();27 await write("Taiko", into("Search"));28 } catch (e) {29 console.error(e);30 } finally {31 await closeBrowser();32 }33})();34const { openBrowser, goto, write, closeBrowser } = require('taiko');35(async () => {36 try {37 await openBrowser();38 await write("Taiko", into("Search"));39 } catch (e) {40 console.error(e);41 } finally {42 await closeBrowser();43 }44})();45const { openBrowser, goto, write, closeBrowser } = require('taiko');46(async () => {47 try {48 await openBrowser();49 await write("Taiko", into("Search"));50 } catch (e) {51 console.error(e);52 } finally {53 await closeBrowser();54 }55})();56const { openBrowser, goto, write, closeBrowser } = require('taiko');57(async () => {58 try {59 await openBrowser();60 await write("Taiko", into("Search"));61 } catch (e) {62 console.error(e);63 } finally {64 await closeBrowser();65 }66})();

Full Screen

Using AI Code Generation

copy

Full Screen

1writeCode('console.log("Hello World")');2writeCode('console.log("Hello World")');3writeCode('console.log("Hello World")');4writeCode('console.log("Hello World")');5writeCode('console.log("Hello World")');6writeCode('console.log("Hello World")');7writeCode('console.log("Hello World")');8writeCode('console.log("Hello World")');9writeCode('console.log("Hello World")');10writeCode('console.log("Hello World")');11writeCode('console.log("Hello World")');12writeCode('console.log("Hello World")');13writeCode('console.log("Hello World")');14writeCode('console.log("Hello World")');15writeCode('console.log("Hello World")');16writeCode('console.log("Hello World")');17writeCode('console.log("Hello World")');18writeCode('console.log("Hello World")');19writeCode('console.log("Hello World")');20writeCode('console.log("Hello World")');21writeCode('console.log("Hello World")');22writeCode('console.log("Hello World")');

Full Screen

Using AI Code Generation

copy

Full Screen

1var taiko = require('taiko');2taiko.writeCode("console.log('Hello world')");3var taiko = require('taiko');4taiko.writeCode("console.log('Hello world')");5var taiko = require('taiko');6taiko.writeCode("console.log('Hello world')");7var taiko = require('taiko');8taiko.writeCode("console.log('Hello world')");9var taiko = require('taiko');10taiko.writeCode("console.log('Hello world')");11var taiko = require('taiko');12taiko.writeCode("console.log('Hello world')");13var taiko = require('taiko');14taiko.writeCode("console.log('Hello world')");15var taiko = require('taiko');16taiko.writeCode("console.log('Hello world')");17var taiko = require('taiko');18taiko.writeCode("console.log('Hello world')");19var taiko = require('taiko');20taiko.writeCode("console.log('Hello world')");21var taiko = require('taiko');22taiko.writeCode("console.log('Hello world')");23var taiko = require('taiko');24taiko.writeCode("console.log('Hello world')");25var taiko = require('taiko');26taiko.writeCode("console.log('Hello world')");

Full Screen

Using AI Code Generation

copy

Full Screen

1writeCode('console.log("hello")');2await page.evaluate('console.log("hello")');3await page.evaluate('console.log("hello")');4writeCode('console.log("hello")');5await page.evaluate('console.log("hello")');6await page.evaluate('console.log("hello")');7writeCode('console.log("hello")');8await page.evaluate('console.log("hello")');9await page.evaluate('console.log("hello")');10writeCode('console.log("hello")');11await page.evaluate('console.log("hello")');12await page.evaluate('console.log("hello")');13writeCode('console.log("hello")');14await page.evaluate('console.log("hello")');15await page.evaluate('console.log("hello")');16writeCode('console.log("hello")');17await page.evaluate('console.log("hello")');18await page.evaluate('console.log("hello")');19writeCode('console.log("hello")');20await page.evaluate('console.log("hello")');21await page.evaluate('console.log("hello")');22writeCode('console.log("hello")');23await page.evaluate('console.log("hello")

Full Screen

Using AI Code Generation

copy

Full Screen

1const {writeCode} = require('taiko');2writeCode('Hello World');3const {writeCode} = require('taiko');4writeCode('Hello World');5const {writeCode} = require('taiko');6writeCode('Hello World');7const {writeCode} = require('taiko');8writeCode('Hello World');9const {writeCode} = require('taiko');10writeCode('Hello World');11const {writeCode} = require('taiko');12writeCode('Hello World');13const {writeCode} = require('taiko');14writeCode('Hello World');15const {writeCode} = require('taiko');16writeCode('Hello World');17const {writeCode} = require('taiko');18writeCode('Hello World');19const {writeCode} = require('taiko');20writeCode('Hello World');21const {writeCode} = require('taiko');22writeCode('Hello World');23const {write

Full Screen

Using AI Code Generation

copy

Full Screen

1writeCode("test.js", "console.log('Hello World!');");2writeCode("test.js", "console.log('Hello World!');", {3});4writeCode("test.js", "console.log('Hello World!');", {5});6writeCode("test.js", "console.log('Hello World!');", {7});8writeCode("test.js", "console.log('Hello World!');", {9});10writeCode("test.js", "console.log('Hello World!');", {11});12writeCode("test.js", "console.log('Hello World!');", {13});14writeCode("test.js", "console.log('Hello World!');", {15});16writeCode("test.js", "console.log('Hello World!');", {

Full Screen

Using AI Code Generation

copy

Full Screen

1writeCode('test.js', 'console.log("Hello World")');2readCode('test.js');3removeCode('test.js');4writeCode('test.js', 'console.log("Hello World")');5readCode('test.js');6removeCode('test.js');7writeCode('test.js', 'console.log("Hello World")');8readCode('test.js');9removeCode('test.js');10writeCode('test.js', 'console.log("Hello World")');11readCode('test.js');12removeCode('test.js');13writeCode('test.js', 'console.log("Hello World")');14readCode('test.js');15removeCode('test.js');16writeCode('test.js', 'console.log("Hello World")');17readCode('test.js');18removeCode('test.js

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run taiko automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful