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