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

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

[复制链接]
heshao 发表于 2024-12-11 15:37:03 | 显示全部楼层 |阅读模式
  T) K# W$ y& g: H; f% I( R
  ai绘画不知火舞在程序生产过程中,如果想快捷地生成一个小功能,我们可以使用AI的AI问答功能来让人工智能帮我们完成如何在线AI写代码的操作。下面来个粟子:
/ E8 \* _, g% C  C  首先打开AI官网:移到菜单栏Ai写作处,选择需要的版本,作者选择的是“问答3.5”,点开后按要求登录,然后选择问答3.5
& d) J% N$ C+ }8 K- Q- `+ P; [  然后进入问答界面:: B- _7 [" B  E. z) \
  然后开始让Ai帮我们写代码,作者本次让Ai写一个原生JS的简单计算器:
! V  o9 K: _; x- x  提问时输入:“我希望你担任资深javascript技术员。你现在需要帮我用javascript写一个计算器代码,并且可以验算是否正确”,如下图
+ j5 @1 z; F, W) t- p: r# x" ?  然后点发送按钮,稍等片刻之后Ai智能就能回答正确的程序出来了
0 z+ ~5 f( {/ {& k) ^  U  首先返回一段JS代码:7 {2 u2 b2 A! |9 e+ X- j
  // 获取计算器的按钮和显示屏元素
3 |# Y- I# b1 n# _( L9 B9 ?/ x7 B  const buttons = document.querySelectorAll('.button');+ ~. ^. I9 Q7 @3 i- I
  const display = document.querySelector('.display');
, ~0 e" `6 b" C  T, v" ]  [& Q% M  // 为每个按钮添加点击事件监听器
  @. F( E( h3 Q& s  buttons.forEach(button => {+ p% h7 q3 l" Z, F" W6 L
  button.addEventListener('click', () => {
, z% i8 H( g. j# C- `. i3 y$ J0 J3 T/ H  const buttonText = button.textContent;5 T$ ~7 I0 a  h9 U$ r1 i8 |2 V
  if (buttonText === '=') {
/ @& j$ O6 h4 C4 ?! g! s  // 如果点击的是等号,则计算表达式结果# d6 k- [$ D7 O6 n' z; h
  try {
& k5 s2 S. C$ _6 ^5 {% @: f  const result = eval(display.value);
; v2 d/ y  X: A; j8 @9 o( ~# x  display.value = result;
9 }) p& N$ ?, u; K" {3 e  } catch (error) {2 i1 ~9 \0 M! n) v% {5 x
  display.value = 'Error';
* G1 |0 F; Q' h  }8 Z/ z" m4 s! e1 J
  } else if (buttonText === 'C') {% j9 ]( B. H% P! ~, `1 p
  // 如果点击的是清除按钮,则清空显示屏
: Y$ V0 U1 U- r  display.value = '';9 D$ d& X- y0 k, U7 V. r) I
  } else {
2 U( l( R* {  _  b# [& q/ n# f  // 否则将按钮的文本内容添加到显示屏上
! `3 u% q$ }: [. W  display.value += buttonText;
1 E3 A0 C; y( b$ R1 q' L  }
$ A$ H6 `5 }6 l9 r! G  });
1 _; q  ?5 ]& \! l1 L+ q  });
- M4 H$ n, z% R& H. d2 M  然后返回承载的HTML代码:! ~& V4 B9 P# E$ u% b
  <input type="text" class="display">
% v2 P. p* [$ g8 m  <div class="calculator">
, w! @/ _1 M+ D  U0 Q0 q' b  <div class="row">) q) O+ m# \2 X
  <button class="button">7</button>4 G: P  b" q% y& a) f1 C' x# b
  <button class="button">8</button>
; `% J: p# W' M$ [" L# A  <button class="button">9</button>
4 ^5 {# L7 X& F# C( j* c/ ]  <button class="button">/</button>3 R  q+ X( q! O
  </div>. K+ N. m8 c6 w( ^- N/ @) n1 n
  <div class="row">. k* m. b& b" h) N, D1 u
  <button class="button">4</button>8 I- N) g7 ?: E' s! y( r( s
  <button class="button">5</button>, o; n4 i7 D8 p; t7 Z
  <button class="button">6</button>
& D/ M# i% H5 R6 j" O  d$ {  <button class="button">*</button>) u, b7 b1 D8 M, b. G7 ]
  </div>, K; h5 {8 }2 {) m* c
  <div class="row">
0 a: z! F0 x( a0 y! o  <button class="button">1</button>$ ]) N" `8 o# q/ V) K$ |
  <button class="button">2</button>
. U+ U$ [. O1 S+ u  <button class="button">3</button>
4 C, y! s5 z; Y7 p, |  <button class="button">+</button>8 _& y4 `5 A+ @- J
  </div>
; w, r/ C' M- z/ e  <div class="row">: y: C: t2 h" _4 ?2 F
  <button class="button">0</button>1 H- n# M+ E2 U/ t9 h" M
  <button class="button">.</button>5 Z; t" N3 W, V' W5 }# \
  <button class="button">=</button>
( J1 e7 m1 y: B% k8 n- X  <button class="button">-</button>; X; ?: I3 C8 D2 g
  </div>
5 T7 g! {, Z6 B# G8 A  <div class="row">
: i, k' f1 X, u  <button class="button">C</button>; V! @0 e( ~0 T9 Q( h" u
  </div>
( V. J- m6 j# U  </div>5 F! g2 y0 a/ ]( t, T
  以下为最终效果展示:
% ~' _% Q$ p: _9 E; v0 k4 C  AI写代码可以快捷地帮我们完成一些简单的代码需求,它可以根据你输入的不同描述需求做成大致的样子,然后在根据AI写代码的结果进行调整使用。& }5 g' i/ H) a  e) g% K
' n7 e7 C8 [0 G# q% j3 W0 [

暂时无法加载帖子列表

回复

使用道具 举报

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

使用道具 举报

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

    本版积分规则

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

    GMT+8, 2026-8-5 14:10 , Processed in 0.047551 second(s), 24 queries , Gzip On.

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

    Powered by Discuz! X3.5

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