00:03
第三章节,我将用AI代码助手帮助大家来编写前端代码。啊,好的,这一章节我将用来给大家演示怎么样开发前端的应用。首先打开studio网站啊,点击HTMLCSS杠加杠JS。看一下这个。内置的一个HTML的一个镜像。啊,在这个准备环节当中,可能需要几秒钟时间。好的,那这几秒钟时间眼睛起来,嗯,然后我们看到这个HTML,这个里面我们预计了一些代码。接下来我们要做一个非常简单的一个应用,通过我们的这个AI代码助手来快速帮助我实现一个啊,非常有意思的一个小的这个动画效果。呃,首先在此之前我再介绍一下高速拥有这个云端开发环境的一个很不错的一个开发体验,它能够拥有那个内置预览啊,包括我们刚才在内置里面的代码里面拥有了一些简单的HTML啊,放上去之后可以简单的看到这样的一个效果。
01:11
嗯,接下来呢,我想对这个代码进行一些简单的修改,把这个位置调整一下。然后呢,侧栏是我们的一个对话效果,这里面就是内置了我们的腾讯AI代码助手。接下来我想,嗯,调一下我们这个样式,感觉这个还不够,嗯,好,我们来看一下这个动画效果怎么样。我们选一下啊,接下来我们来输入我的需求,比如说嗯。把鼠标,鼠标移动到文字上。动画的是文字的,我们来加一个,加个动画效果,就是说来一个心跳。和特效。开个火车。接下来这个AI代AI代码助手,基于混原大模型啊,通过我们圈选的这个代码作为上下文啊,快速帮我生成啊,对应的具有CSS script+script啊等这样的一个样式,来看一下这个效果。
02:13
首先他告诉我,嗯,在这个过程当中啊,是需要用一个script.gs啊,编写一个javascript,并且定义一个style点样式啊,通过这个样式来定义这个动画效果,并且定义一个这个这样的一个心跳啊,同时它也定义了一个javascript,然后在这个javascript里面定义这样的一个。好,那么接下来的话就是我们可以再去试一下这个效果。首先我们把这个。插入到这个。新息文件里我们来定保存一下,保存成一个叫style。对。接下来呢,它要有一个javascript啊,Script等S来一个insert组。
03:05
嗯。嗯。或者接下来呢。啊,我们来在HR的地方啊,有一个他说现在鼠标停留在HR的标签上就可以显示这个动画效果好的,那么接下来我们来看一下这个,刷新一下这个效果。诶,看下这个效果就是一种心跳的感觉,所以在这个效果里面,我们把刚才的那个彩色的字体啊,通过这样的一个简单的一个需求啊,生成代码,有效的帮助我快速的啊,实现这样的一个我想要的这样的一个效果啊,心跳的这样的感觉啊,甚至我也可以在这个里面再重新通过我们的代码补权来微调一下我的这个代码,譬如说嗯。比如说我可以希望啊,我希望什么呢?我希望把我的这个里面啊,这个style啊,我希望把我的这个。
04:04
呃,样式啊,我希望把我的这个好的样式改成啊,改成什么呢?改成是一个背景色,那么我来再给他增加一个需求,比如说嗯,增加背景色为色。通过他跟我的这样的一个对话,他可以快速的告诉我OK,我可以定义成这样的一个这样的一个background,是一个blue OK, 那么我在我这个里面,我就可以快速的定这样的一个background,这样的C样从能够快速帮我去生成这样的一个这样的一个效。这个是一个非常简单的一个事例,来帮助大家怎么样通过这个的对话啊,通过我的需求生成代码,从而插入到我的右边,能快速的能通过close的预览效果生成我想要的一个啊一个需求。
05:02
啊,这次这个的前端网站的演示就到这里,好的,这一章节已经到此结束啊,先来做一个预告,下一个章节我将给大家介绍AI代码助手,编写Python代码。
我来说两句