9 s" I: A: E J5 u1 {
ai绘画不知火舞在程序生产过程中,如果想快捷地生成一个小功能,我们可以使用AI的AI问答功能来让人工智能帮我们完成如何在线AI写代码的操作。下面来个粟子:& a K" q( B; o5 c$ N! x' |
首先打开AI官网:移到菜单栏Ai写作处,选择需要的版本,作者选择的是“问答3.5”,点开后按要求登录,然后选择问答3.5+ B* E4 z* ]; B4 ]; g( l
然后进入问答界面:2 x- W9 G' o; C* g5 V# R8 s* k
然后开始让Ai帮我们写代码,作者本次让Ai写一个原生JS的简单计算器:
9 {- ^+ ?- o: n/ K! b" w 提问时输入:“我希望你担任资深javascript技术员。你现在需要帮我用javascript写一个计算器代码,并且可以验算是否正确”,如下图
' o: F X# X- h' T- B9 f 然后点发送按钮,稍等片刻之后Ai智能就能回答正确的程序出来了
4 v2 y4 }0 |! R/ H 首先返回一段JS代码:
: `6 P3 ^3 R5 T/ M8 u. x // 获取计算器的按钮和显示屏元素
5 n0 [2 F1 D: a( H. ? const buttons = document.querySelectorAll('.button');) d+ S5 b) t+ K% g# D3 A
const display = document.querySelector('.display');
* P" `. Y% l4 p+ N4 M7 W% \3 C6 ^ // 为每个按钮添加点击事件监听器5 g7 E3 S$ d- i
buttons.forEach(button => {! m5 C( q& A2 M* }
button.addEventListener('click', () => {. o; s6 a+ ?) d6 |: z% ]& a+ O
const buttonText = button.textContent;
6 R3 D3 x1 E. f if (buttonText === '=') {
7 W2 z3 u+ t) U. H' d& I% N // 如果点击的是等号,则计算表达式结果8 Q" w3 ^. y/ d: v
try {# e$ G, L0 p2 ^7 q7 X& K. H7 W
const result = eval(display.value);) R4 [1 F; d) n' C; U
display.value = result;
k& h8 F5 L7 H+ N } catch (error) {% U; H' p; C5 d4 X
display.value = 'Error';2 b* P' v- ]% t+ p* j6 |
}1 g* j2 e) G& Y
} else if (buttonText === 'C') {
( ]8 ?2 g( m+ l; R! @- M6 H // 如果点击的是清除按钮,则清空显示屏* J9 s) Y2 K, @9 o! s* o& ?
display.value = '';
+ ?* r' L: x% o' h X& ] } else {
8 D a2 {/ _/ q // 否则将按钮的文本内容添加到显示屏上
2 @5 N3 u" `3 m6 R+ T3 S2 F display.value += buttonText;
" u; R* G9 R8 W7 g }: i7 {( Y8 h- S7 X+ L) ]; n
});
7 `. p. K- o7 {" I' X });+ s( X6 Y3 s" M. Q1 W
然后返回承载的HTML代码:! o9 D. \9 v' ?. j1 l5 D* p
<input type="text" class="display">
: s# z; a8 Y4 l: {2 l! p <div class="calculator">, c5 R# T" H. @+ n5 |
<div class="row">% |7 O! x+ M! l
<button class="button">7</button>
2 X2 |) ?% D; w0 i( u0 ?: C3 H <button class="button">8</button>
2 s' o# m7 W: j7 b, r <button class="button">9</button>
" X( Y' ?, ~# { <button class="button">/</button>* [) W3 \6 x, _) y: I
</div>6 Q3 ^5 o& B- k2 ^* _" O
<div class="row">' ~/ J; b7 O9 ^% F/ u5 B6 _( d+ C9 k% Y
<button class="button">4</button>
3 `" @3 @2 w5 I9 W5 M6 B$ L <button class="button">5</button>6 _3 e7 |5 T0 U* l4 t: O
<button class="button">6</button>
+ [) h0 G- S$ C K <button class="button">*</button>: J- b0 L' _$ F; @" _ Z0 y$ ^
</div>
0 B. M, O6 e5 d1 W1 k <div class="row">' }( \5 Z) Y0 b% a/ t
<button class="button">1</button>
* `8 G% V! p. n$ G- E5 B <button class="button">2</button>
7 p" l2 g+ q) r <button class="button">3</button>
1 J% k; m% X$ Y, g <button class="button">+</button>
, k( }2 f8 x) ]8 \4 I7 r( H </div>
7 J4 [0 V3 ^3 y1 j( \ <div class="row">: j9 [- P7 d. h4 U# C- O3 \' b$ z
<button class="button">0</button>
% Z, E: C! \0 [; p" W+ ?; D <button class="button">.</button>( f- {4 [5 @. @4 q+ u) M" J
<button class="button">=</button>
3 P& c. x- c% _1 { <button class="button">-</button>" u& ~( [+ M! ^3 h
</div>
3 _7 N" D# [# @ <div class="row">
' ]3 }% g3 W/ V% y7 b <button class="button">C</button>9 {1 g o; U: `: [0 Q5 y
</div>% j; c) |4 d% n" F) E' L+ l
</div> v+ v6 L- g4 l
以下为最终效果展示:
1 |+ f* q& y- n0 a! z AI写代码可以快捷地帮我们完成一些简单的代码需求,它可以根据你输入的不同描述需求做成大致的样子,然后在根据AI写代码的结果进行调整使用。4 H5 d6 E; W+ k& a' J+ Z/ X. M
5 I3 I/ L S! g7 l* \
|