wordpress网站侧栏加一个AI提示的代码

wp侧栏小工具加一个推广AI的模块，类似对话打字效果，下面是代码：

<div class="widget widget-chatgpt">
<div class="chatgpt-msg">
<div class="item"><span>小明</span><div class="msg"><span id="typed-me-span">帮我写个关于***的开题报告</span></div></div>
<div class="item"><span>AI助手</span><div id="typed-text" class="msg"><span id="typed-text-span">好的，正在构思中，请稍等...</span></div></div>
</div>
<a href="<?php echo _MBT('child_openai_link');?>" target="_blank" class="btn">我要AI创作</a>
<script>
const div = document.getElementById('typed-me-span');
const text = div.innerHTML;
div.innerHTML = '';

for(let i = 0; i < text.length; i++) {
setTimeout(function(){
div.innerHTML += text.charAt(i);
}, i * 100);
}

setTimeout(function(){
jQuery("#typed-text-span").css("opacity","1");
const div2 = document.getElementById('typed-text-span');
const text = div2.innerHTML;
div2.innerHTML = '';

for(let i = 0; i < text.length; i++) {
setTimeout(function(){
div2.innerHTML += text.charAt(i);
}, i * 100);
}
},'2000');

</script>
</div>

css代码

.widget-chatgpt .btn{width:100%; background: linear-gradient( 270deg, #ff5f33 0%, #fe987c 100%); box-shadow: 0px 6px 10px 0px rgb(254 152 124 / 40%);display:block;color:#fff;padding:10px 0}
.widget-chatgpt .chatgpt-msg .item{margin-bottom:20px;overflow:hidden;text-align:right}
.widget-chatgpt .chatgpt-msg .item > span{display:block;color:#999;margin-bottom:3px;font-size:14px;}
.widget-chatgpt .chatgpt-msg .item .msg{background:#f5f5f5;padding:6px 14px;border-radius:8px 0 8px 8px;max-width:80%;font-size:14px;word-break: break-word;-webkit-user-select: text;-moz-user-select: text;user-select: text;display: inline-block;text-align: left; white-space: nowrap; overflow: hidden;width:210px;}
.widget-chatgpt .chatgpt-msg .item .msg #typed-me-span{animation: typing 4s steps(40, end);}
.widget-chatgpt .chatgpt-msg .item .msg #typed-text-span{animation: typing 10s steps(100, end);opacity:0}
.widget-chatgpt .chatgpt-msg .item:nth-child(2n){text-align:left}
.widget-chatgpt .chatgpt-msg .item:nth-child(2n) .msg{border-radius:0 8px 8px 8px}

以上就是模板兔提供的代码参考~有需要定制开发功能的小伙伴可以联系我们。