找回密码
 加入怎通
查看: 292|回复: 2

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

[复制链接]
heshao 发表于 2024-12-11 15:37:03 | 显示全部楼层 |阅读模式

* Q- I* h/ V. F! O  ai绘画不知火舞在程序生产过程中,如果想快捷地生成一个小功能,我们可以使用AI的AI问答功能来让人工智能帮我们完成如何在线AI写代码的操作。下面来个粟子:  V3 B8 Z0 R& _; M5 x
  首先打开AI官网:移到菜单栏Ai写作处,选择需要的版本,作者选择的是“问答3.5”,点开后按要求登录,然后选择问答3.5
. |  w; D2 P8 V- i: u( {  然后进入问答界面:5 d7 a! B9 X$ {$ E
  然后开始让Ai帮我们写代码,作者本次让Ai写一个原生JS的简单计算器:- m: G, W' S# l
  提问时输入:“我希望你担任资深javascript技术员。你现在需要帮我用javascript写一个计算器代码,并且可以验算是否正确”,如下图
6 Z. ~2 [* A# b8 i$ _4 c  然后点发送按钮,稍等片刻之后Ai智能就能回答正确的程序出来了
3 x9 s0 X3 |" D: ]! r$ o  首先返回一段JS代码:/ T- o( l+ S9 W4 Q8 L$ ^& |
  // 获取计算器的按钮和显示屏元素
4 t  W* p7 O4 q' m$ s/ J  const buttons = document.querySelectorAll('.button');
  x! K9 S5 J/ v! z  Q  const display = document.querySelector('.display');9 w6 h* N6 ?3 B/ o8 d0 i2 M
  // 为每个按钮添加点击事件监听器0 C! ]& L# ]$ \0 ]9 \# H2 B" {) u
  buttons.forEach(button => {& u0 W4 a9 G$ B2 N1 k4 r' i0 s  n
  button.addEventListener('click', () => {( U6 ~9 H6 G% d( A- m
  const buttonText = button.textContent;9 F2 m/ d8 a0 `  h
  if (buttonText === '=') {5 w. s6 r  A2 n  Z4 W
  // 如果点击的是等号,则计算表达式结果
8 R, F" L( r# f9 G1 x# S1 k6 _  try {
7 Q* z% ?* f  g1 m/ ]  const result = eval(display.value);
/ ~/ @5 w$ z$ u6 f  display.value = result;
5 B$ Y5 c! b3 T8 P" l% O# `8 f  } catch (error) {) C) `! d$ @  I2 E
  display.value = 'Error';
- E1 W3 b, B7 k# q/ ^" O  }+ A# D* ~# k; V, g$ W- [, {1 i$ u( T
  } else if (buttonText === 'C') {. h' e7 }) i; h' M
  // 如果点击的是清除按钮,则清空显示屏+ |. |- T$ @7 F' y+ m3 R
  display.value = '';
# V/ H' ]# y' r  } else {
9 ?0 X/ o% z* m; z; ]2 ?7 L! \  // 否则将按钮的文本内容添加到显示屏上
& k4 x: D; j% ?  display.value += buttonText;
4 e; w  [' q) e  G0 m* X  z  }, U5 c2 W- y' Q& Z' I9 `; _
  });
  T$ u9 h6 z8 ~) u3 n7 S" L: f( J  });
; s, |: s/ u9 t7 }9 S4 F6 d4 t  然后返回承载的HTML代码:
/ H* V5 f6 R- X+ \  <input type="text" class="display">
& W7 A! G  A3 V9 @  <div class="calculator">
# R' w5 N- N: P' C) Z/ @0 d7 U  <div class="row">
- l. }5 I# N$ t) K  z2 L  <button class="button">7</button>
4 B& p: i0 S' l6 U; N  <button class="button">8</button>- T, ?4 j8 I8 z$ V+ \8 F2 }+ r% |
  <button class="button">9</button>  s1 `1 @( }' j
  <button class="button">/</button>
2 C' E5 X4 G. D, o5 c  </div>& x0 R/ S# G: E: u: F
  <div class="row">8 l+ B; v# a+ f- K5 T
  <button class="button">4</button>
8 j* A& d" m: b3 F6 G, a6 h  <button class="button">5</button>
2 ~) `0 P: e8 A+ L. D  <button class="button">6</button>' N" c. T8 O: f" Y5 ^6 {+ J6 L
  <button class="button">*</button>
. l/ M: y8 V6 n  </div>
; N6 L2 l6 |- m% x& H# Q  <div class="row">7 u$ P8 L+ M+ ~1 B0 l$ t7 n
  <button class="button">1</button>
* B( Z$ e; _) y) m9 ^  <button class="button">2</button>7 q* G3 J4 U( p7 z( }
  <button class="button">3</button>
9 X7 _4 {4 H8 I' W% N5 e0 l; d$ W! j  <button class="button">+</button>
& u: U: Y6 g: R/ f  </div>
. P9 M4 L" W7 T9 H  <div class="row">! ]+ Q* A' l8 o& }1 p8 I
  <button class="button">0</button>/ v" [" T, l' Y: s2 [4 G
  <button class="button">.</button>
; W! o. h, ?* C2 Z4 @  <button class="button">=</button>- @( D2 z1 |; d/ V4 M9 k
  <button class="button">-</button>
* I3 ~# Y4 U; z; L) V, }* X4 u+ E% M  </div>8 \( l% M- y! s2 g
  <div class="row">
$ ~  G+ u4 T+ Z  <button class="button">C</button>5 l8 s+ t2 z. }$ d+ R
  </div>  \" x8 {5 a, c$ s3 h  l1 W/ s$ C
  </div>
- y* K4 O" y$ X4 H8 f2 s% b: j) P  以下为最终效果展示:
1 A4 @$ S! D- x+ f  AI写代码可以快捷地帮我们完成一些简单的代码需求,它可以根据你输入的不同描述需求做成大致的样子,然后在根据AI写代码的结果进行调整使用。
2 `, U5 a0 v' g/ v2 }7 C% \0 {  W
7 N8 r' g7 w8 O

暂时无法加载帖子列表

回复

使用道具 举报

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

使用道具 举报

西万路小混混 发表于 2026-08-07 21:52:18 | 显示全部楼层
楼主太厉害了,整理得这么详细,必须支持
回复

使用道具 举报

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

    本版积分规则

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

    GMT+8, 2026-9-21 00:42 , Processed in 0.049030 second(s), 24 queries , Gzip On.

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

    Powered by Discuz! X3.5

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