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

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

[复制链接]
heshao 发表于 2024-12-11 15:37:03 | 显示全部楼层 |阅读模式
' S& ?$ {5 N5 O( j
  ai绘画不知火舞在程序生产过程中,如果想快捷地生成一个小功能,我们可以使用AI的AI问答功能来让人工智能帮我们完成如何在线AI写代码的操作。下面来个粟子:
; T2 K/ W+ i% H9 l( Y$ H  首先打开AI官网:移到菜单栏Ai写作处,选择需要的版本,作者选择的是“问答3.5”,点开后按要求登录,然后选择问答3.57 ?9 o5 M6 x2 p* v& t$ Q+ {5 y
  然后进入问答界面:
6 R4 `3 t! m' J& P, i, w+ y; j  然后开始让Ai帮我们写代码,作者本次让Ai写一个原生JS的简单计算器:$ J) X& L0 U4 ], `( j2 B! W
  提问时输入:“我希望你担任资深javascript技术员。你现在需要帮我用javascript写一个计算器代码,并且可以验算是否正确”,如下图
5 q/ D6 I: _5 E; Q9 o( O  然后点发送按钮,稍等片刻之后Ai智能就能回答正确的程序出来了! _% `0 B- e- G2 w1 }5 \+ M4 L
  首先返回一段JS代码:
& W& P/ c9 E1 d$ r  // 获取计算器的按钮和显示屏元素5 O6 F+ F7 h. t: @2 J: d1 {2 ?# d- f5 f' a
  const buttons = document.querySelectorAll('.button');
. y! X3 ?$ b9 Z# _0 ]& o$ g: o  I2 Z  const display = document.querySelector('.display');
3 ~6 H( R7 z) q0 [# v; i, b) l  // 为每个按钮添加点击事件监听器
+ X, `5 [! G9 N  a  buttons.forEach(button => {+ O0 j& t- P( K9 d6 l+ `7 i
  button.addEventListener('click', () => {
% P* g4 [: \5 r  const buttonText = button.textContent;/ g2 ^! p( p7 x
  if (buttonText === '=') {& g3 j  r9 ^% L4 m
  // 如果点击的是等号,则计算表达式结果; @. m" H2 V( r  h& p+ G% H
  try {
" N. ]9 \5 j' F0 p# }: e  const result = eval(display.value);
9 f1 i% T/ i$ K  display.value = result;
+ V4 r2 n% y$ i. R. ?/ d: |+ h: c  } catch (error) {& q, e- S5 K+ C1 C. ]. P
  display.value = 'Error';1 S7 |9 Q% K7 ]; F# @
  }
5 e+ \# N1 h4 z. g3 w5 K9 w: w  } else if (buttonText === 'C') {7 W: X0 s8 X0 s3 G
  // 如果点击的是清除按钮,则清空显示屏! ]) P, q( ~) i% O
  display.value = '';
- ]. K6 e8 P% n- y* |* y  } else {
) U) F& I2 g4 \7 e/ Z2 C8 p) a  // 否则将按钮的文本内容添加到显示屏上; y) \2 @8 z- [& F  }  r, q3 q
  display.value += buttonText;- s4 R$ C  D, o" g5 B
  }! [$ y  [* C: S
  });
2 D% ~1 _4 ^& n: Z5 h' h+ z  });
7 T0 q# f) \& j. ~( S% T# Z* b  然后返回承载的HTML代码:
4 K8 ]* d! W. @6 U; T  <input type="text" class="display">
/ B1 v, Q  |& I4 T/ E; d& I, g  <div class="calculator">
& }! R# T% A2 y! `) O  <div class="row">
. i; n: c5 ^8 n0 R/ F$ [  ^5 g& h8 X  <button class="button">7</button>2 Y8 O7 I+ {$ h& v1 s' U
  <button class="button">8</button>( n. h2 y7 K6 h4 B- H" v1 h1 D, n
  <button class="button">9</button>
/ G% p5 D, l$ Q8 z3 v# r" V  <button class="button">/</button>0 o- f' }0 ~: J$ R5 c. E
  </div>
" j% R) r5 U" G4 t0 v* L& Y  <div class="row">
9 W3 I3 B) ^7 h$ F, `/ n& o" H) V  <button class="button">4</button>4 l8 A/ N3 s" K# [
  <button class="button">5</button>% E( r- N5 d  K+ u' F
  <button class="button">6</button>8 f2 m" f% _0 r' r/ t7 y2 N
  <button class="button">*</button>
& |9 W) k5 P; P; @) f! z7 h  </div>5 O: R( y0 r( q1 ^4 ?  k
  <div class="row">; V- \% T' p' h6 Y7 r
  <button class="button">1</button>$ n/ q! a  m+ k+ c, Q: s6 p  a$ e
  <button class="button">2</button># b1 W# B6 [' }1 q1 R
  <button class="button">3</button>
! |: K# [7 R/ O' ^" `  <button class="button">+</button>6 ?& W: @  ]9 T6 c! e8 a
  </div>2 ]/ u7 B6 M: |: L
  <div class="row">  r! R, ~. {2 e" J" j1 b
  <button class="button">0</button>1 @. [& O7 V) w2 }
  <button class="button">.</button>
& q* Y% f) e( W5 Q( N  N$ [  <button class="button">=</button>
! h& a' W1 U/ t) s! G4 k% I  <button class="button">-</button>
( H! Y6 d+ H, c  g) u4 j  </div>
. J. H4 N1 G- Q$ m  <div class="row">
% Q+ g, Y$ o2 q. V, m; g4 ]. n  <button class="button">C</button>9 H" k4 D: t6 C( g2 x9 `: n. W
  </div>9 C0 x+ I4 @, r% N3 |
  </div>
# U% g/ Y- b" X# V" _7 n  以下为最终效果展示:% `. l% y( z) y; {
  AI写代码可以快捷地帮我们完成一些简单的代码需求,它可以根据你输入的不同描述需求做成大致的样子,然后在根据AI写代码的结果进行调整使用。4 A2 O9 g' f  r( v
) x. @* ?( M4 }6 H( Q
回复

使用道具 举报

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

使用道具 举报

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

    本版积分规则

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

    GMT+8, 2026-6-14 21:07 , Processed in 0.026582 second(s), 22 queries , Gzip On.

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

    Powered by Discuz! X3.5

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