* 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 |