找回密码
 加入怎通
查看: 279|回复: 1

怎么使用AI写代码教程演示案例

[复制链接]
heshao 发表于 2024-12-11 15:37:03 | 显示全部楼层 |阅读模式
9 s" I: A: E  J5 u1 {
  ai绘画不知火舞在程序生产过程中,如果想快捷地生成一个小功能,我们可以使用AI的AI问答功能来让人工智能帮我们完成如何在线AI写代码的操作。下面来个粟子:& a  K" q( B; o5 c$ N! x' |
  首先打开AI官网:移到菜单栏Ai写作处,选择需要的版本,作者选择的是“问答3.5”,点开后按要求登录,然后选择问答3.5+ B* E4 z* ]; B4 ]; g( l
  然后进入问答界面:2 x- W9 G' o; C* g5 V# R8 s* k
  然后开始让Ai帮我们写代码,作者本次让Ai写一个原生JS的简单计算器:
9 {- ^+ ?- o: n/ K! b" w  提问时输入:“我希望你担任资深javascript技术员。你现在需要帮我用javascript写一个计算器代码,并且可以验算是否正确”,如下图
' o: F  X# X- h' T- B9 f  然后点发送按钮,稍等片刻之后Ai智能就能回答正确的程序出来了
4 v2 y4 }0 |! R/ H  首先返回一段JS代码:
: `6 P3 ^3 R5 T/ M8 u. x  // 获取计算器的按钮和显示屏元素
5 n0 [2 F1 D: a( H. ?  const buttons = document.querySelectorAll('.button');) d+ S5 b) t+ K% g# D3 A
  const display = document.querySelector('.display');
* P" `. Y% l4 p+ N4 M7 W% \3 C6 ^  // 为每个按钮添加点击事件监听器5 g7 E3 S$ d- i
  buttons.forEach(button => {! m5 C( q& A2 M* }
  button.addEventListener('click', () => {. o; s6 a+ ?) d6 |: z% ]& a+ O
  const buttonText = button.textContent;
6 R3 D3 x1 E. f  if (buttonText === '=') {
7 W2 z3 u+ t) U. H' d& I% N  // 如果点击的是等号,则计算表达式结果8 Q" w3 ^. y/ d: v
  try {# e$ G, L0 p2 ^7 q7 X& K. H7 W
  const result = eval(display.value);) R4 [1 F; d) n' C; U
  display.value = result;
  k& h8 F5 L7 H+ N  } catch (error) {% U; H' p; C5 d4 X
  display.value = 'Error';2 b* P' v- ]% t+ p* j6 |
  }1 g* j2 e) G& Y
  } else if (buttonText === 'C') {
( ]8 ?2 g( m+ l; R! @- M6 H  // 如果点击的是清除按钮,则清空显示屏* J9 s) Y2 K, @9 o! s* o& ?
  display.value = '';
+ ?* r' L: x% o' h  X& ]  } else {
8 D  a2 {/ _/ q  // 否则将按钮的文本内容添加到显示屏上
2 @5 N3 u" `3 m6 R+ T3 S2 F  display.value += buttonText;
" u; R* G9 R8 W7 g  }: i7 {( Y8 h- S7 X+ L) ]; n
  });
7 `. p. K- o7 {" I' X  });+ s( X6 Y3 s" M. Q1 W
  然后返回承载的HTML代码:! o9 D. \9 v' ?. j1 l5 D* p
  <input type="text" class="display">
: s# z; a8 Y4 l: {2 l! p  <div class="calculator">, c5 R# T" H. @+ n5 |
  <div class="row">% |7 O! x+ M! l
  <button class="button">7</button>
2 X2 |) ?% D; w0 i( u0 ?: C3 H  <button class="button">8</button>
2 s' o# m7 W: j7 b, r  <button class="button">9</button>
" X( Y' ?, ~# {  <button class="button">/</button>* [) W3 \6 x, _) y: I
  </div>6 Q3 ^5 o& B- k2 ^* _" O
  <div class="row">' ~/ J; b7 O9 ^% F/ u5 B6 _( d+ C9 k% Y
  <button class="button">4</button>
3 `" @3 @2 w5 I9 W5 M6 B$ L  <button class="button">5</button>6 _3 e7 |5 T0 U* l4 t: O
  <button class="button">6</button>
+ [) h0 G- S$ C  K  <button class="button">*</button>: J- b0 L' _$ F; @" _  Z0 y$ ^
  </div>
0 B. M, O6 e5 d1 W1 k  <div class="row">' }( \5 Z) Y0 b% a/ t
  <button class="button">1</button>
* `8 G% V! p. n$ G- E5 B  <button class="button">2</button>
7 p" l2 g+ q) r  <button class="button">3</button>
1 J% k; m% X$ Y, g  <button class="button">+</button>
, k( }2 f8 x) ]8 \4 I7 r( H  </div>
7 J4 [0 V3 ^3 y1 j( \  <div class="row">: j9 [- P7 d. h4 U# C- O3 \' b$ z
  <button class="button">0</button>
% Z, E: C! \0 [; p" W+ ?; D  <button class="button">.</button>( f- {4 [5 @. @4 q+ u) M" J
  <button class="button">=</button>
3 P& c. x- c% _1 {  <button class="button">-</button>" u& ~( [+ M! ^3 h
  </div>
3 _7 N" D# [# @  <div class="row">
' ]3 }% g3 W/ V% y7 b  <button class="button">C</button>9 {1 g  o; U: `: [0 Q5 y
  </div>% j; c) |4 d% n" F) E' L+ l
  </div>  v+ v6 L- g4 l
  以下为最终效果展示:
1 |+ f* q& y- n0 a! z  AI写代码可以快捷地帮我们完成一些简单的代码需求,它可以根据你输入的不同描述需求做成大致的样子,然后在根据AI写代码的结果进行调整使用。4 H5 d6 E; W+ k& a' J+ Z/ X. M
5 I3 I/ L  S! g7 l* \

暂时无法加载帖子列表

回复

使用道具 举报

cw580366 发表于 2026-03-23 18:55:27 | 显示全部楼层
楼主辛苦了,整理这么多内容,必须点赞收藏
回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 加入怎通

    本版积分规则

    QQ|手机版|小黑屋|网站地图|真牛社区 ( 苏ICP备2023040716号-2 )

    GMT+8, 2026-8-7 21:52 , Processed in 0.070437 second(s), 51 queries , Gzip On.

    免责声明:本站信息来自互联网,本站不对其内容真实性负责,如有侵权等情况请联系420897364#qq.com(把#换成@)删除。

    Powered by Discuz! X3.5

    快速回复 返回顶部 返回列表