找回密码
 加入怎通
查看: 252|回复: 0

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

[复制链接]
heshao 发表于 2024-12-11 15:37:03 | 显示全部楼层 |阅读模式
/ [+ l; \' i& y6 Y
  ai绘画不知火舞在程序生产过程中,如果想快捷地生成一个小功能,我们可以使用AI的AI问答功能来让人工智能帮我们完成如何在线AI写代码的操作。下面来个粟子:
6 t* r7 j8 U( c( ?9 ~  首先打开AI官网:移到菜单栏Ai写作处,选择需要的版本,作者选择的是“问答3.5”,点开后按要求登录,然后选择问答3.5
7 p3 q, M9 C$ ], q' T7 v/ Q  然后进入问答界面:
, r# o; B5 [1 k+ w+ J0 W; ~  然后开始让Ai帮我们写代码,作者本次让Ai写一个原生JS的简单计算器:
+ V% F4 t/ ]* n* x- k4 i% ^! R* v  提问时输入:“我希望你担任资深javascript技术员。你现在需要帮我用javascript写一个计算器代码,并且可以验算是否正确”,如下图' b% v+ E  L$ i/ T& I5 ^
  然后点发送按钮,稍等片刻之后Ai智能就能回答正确的程序出来了
0 _4 E" w' C: A/ k  首先返回一段JS代码:
2 i; ^* }8 `$ H  // 获取计算器的按钮和显示屏元素
* [2 O2 Z6 P6 Z% }5 q8 b! L  const buttons = document.querySelectorAll('.button');$ R% N- F8 K) J
  const display = document.querySelector('.display');
7 A! l; `8 U& j! v# c/ P  // 为每个按钮添加点击事件监听器
8 Y2 A2 K. `% q1 A# k  buttons.forEach(button => {
* p5 y  `. m, [% f  button.addEventListener('click', () => {* e& b- p: W5 w* G, ?6 A1 g
  const buttonText = button.textContent;( V( ^0 f0 l  A7 Z
  if (buttonText === '=') {
0 P8 K0 d& p) M+ n3 X  // 如果点击的是等号,则计算表达式结果  B7 _7 J3 [3 Y& Z3 f# z; ^" [: r
  try {" G& ]* w7 h) O# {+ S% q7 X' J
  const result = eval(display.value);
% b# ]: j/ Y$ D- Y+ E- H  display.value = result;
# v9 o! u8 I3 I; X+ s. o" Y) g  r  } catch (error) {
  i' q; z& N3 w" [. E- O  display.value = 'Error';
3 j' k9 U' [; j5 B* h  }6 N2 c; F1 L- g% W3 |8 T
  } else if (buttonText === 'C') {
# i8 W( i( j; k# [/ P  // 如果点击的是清除按钮,则清空显示屏2 w* g% L1 Y/ M8 U, h. I
  display.value = '';
: M9 ?+ a( F! O* |9 J6 W7 t  } else {9 Q/ t1 P* T( f# k
  // 否则将按钮的文本内容添加到显示屏上5 H% |1 \, c- ]/ E0 t2 u
  display.value += buttonText;
% J- O7 u. N7 V7 j+ R8 k  }
* \; [  g* d/ i" b' P) P  });
/ g' X: {, y* j1 C: F' x  });
: Q7 e7 m! x3 S! W* Z% n8 n  然后返回承载的HTML代码:
) O$ r# Y; a/ _9 O" V2 O4 k+ G  <input type="text" class="display">- b2 ]0 E9 U& q2 t$ S1 V/ x( Q7 |
  <div class="calculator">
4 e+ P: X; J9 d' t! I* x+ ]$ A& j  <div class="row">
  d2 l& a0 x2 T0 U  <button class="button">7</button>
8 h, c( }4 B3 W* y  <button class="button">8</button>
, M5 f' j8 b$ `3 ^. d% Q  e9 b  <button class="button">9</button>
' U1 M4 D2 _4 ~5 V  g8 s  y  <button class="button">/</button>
& K& b1 Z+ |9 X8 t! d- h3 v  </div>: w* w( k9 R* i: K0 W
  <div class="row">
: ?" j& j# \& z! v5 c* F' h: i  <button class="button">4</button>5 {  {' m# ?4 s
  <button class="button">5</button>0 ]& c5 ?) k2 Z
  <button class="button">6</button>
6 C: L8 S# |1 d' o4 @( M9 J4 ]  C  <button class="button">*</button>
8 L& D* ~! ?7 J  </div>
$ A0 A$ c1 i% p7 Q3 h( X0 a  <div class="row">* h  {5 i; h) E! y1 ^: e
  <button class="button">1</button>
& i7 L( }: c* N6 q/ \) t8 Y4 q8 U  <button class="button">2</button>" u% L  i+ U. O6 o% N0 J  G
  <button class="button">3</button>
( m$ i8 ~. p/ }  Z; F; }  <button class="button">+</button># K# o0 @6 S/ J& g" Q- W
  </div>
6 u# G5 C) \' C2 H. f- \5 g, F/ d5 Z& J0 j  <div class="row">" X3 J9 _+ ^+ r3 E) _
  <button class="button">0</button>) E7 C% B) v! D1 o
  <button class="button">.</button>
/ A% u, C1 ^$ y/ d  <button class="button">=</button>7 a+ c! m  s! \+ C  Z# t" t
  <button class="button">-</button>( \( n- s2 j! x, T' M, v. Z
  </div>
* s. c+ B$ C4 G8 a  <div class="row">
) ~+ [3 a! Z# s- o2 V  <button class="button">C</button>
) j7 A; `9 t% P4 z2 b3 @* z6 g  </div>
* E8 D, I! {0 ~  </div>! p0 n- W% T% ]+ @
  以下为最终效果展示:
  x5 e4 j% Y+ o7 @" z% a- T  AI写代码可以快捷地帮我们完成一些简单的代码需求,它可以根据你输入的不同描述需求做成大致的样子,然后在根据AI写代码的结果进行调整使用。& P7 y4 r, \8 ?) {3 m- r

( M; z* S5 D5 S% S* a( [) w
回复

使用道具 举报

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

    本版积分规则

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

    GMT+8, 2026-3-21 23:16 , Processed in 0.095596 second(s), 23 queries , Gzip On.

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

    Powered by Discuz! X3.5

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