英文:
Change text colour for specific user in css (node js chat)
问题
我有一个简单的聊天室，用户可以互相聊天。我想要的是，如果用户1写了一些文本并发送，它将以白色显示给他自己，而其他用户发送的任何文本都将是黑色。我知道这可能有一个简单的CSS解决方案，但我无法弄清楚。以下是HTML代码。
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button class="btn-primary"><b>Send</b></button>
</form>
<script src="/torrent-tracker/template/node_modules/socket.io/client-dist/socket.io.js"></script>
<script>
var url = "http://someurl.net";
const socket = io(url);
var messages = document.getElementById('messages');
var form = document.getElementById('form');
let input = document.getElementById('input');
var upime = "<?php echo $upime.": ";?>";
var uporabnik = "<?php echo $upime;?>";
socket.emit('newUser', uporabnik);
form.addEventListener('submit', function(e){
e.preventDefault();
if(input.value){
<?php last_action(); ?>
socket.emit('PosljiSporocilo', upime+input.value);
console.log(upime+input.value);
input.value = '';
}
});
socket.on('DobiSporocilo', Sporocilo => {
var item = document.createElement('li');
item.textContent = Sporocilo;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
socket.on('newUserJoined', joinedUser => {
var item = document.createElement('li');
item.textContent = joinedUser;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
如果您有任何其他问题，请随时提出。
英文:
I have a simple chat room where users can chat to each other. What I want is that if user1 writes some text and sends it it will appear lets say in white for him and him only any other text from other users would be black colour. I know there is probably a simple CSS solution but I can't figure it out. Below is the HTML code.
<ul id="messages"></ul>
<form id="form" action="">
<input id="input" autocomplete="off" /><button class="btn-primary"><b>Send</b></button>
</form>
<script src="/torrent-tracker/template/node_modules/socket.io/client-dist/socket.io.js"></script>
<script>
var url = "http://someurl.net";
const socket = io(url);
var messages = document.getElementById('messages');
var form = document.getElementById('form');
let input = document.getElementById('input');
var upime = "<?php echo $upime.": ";?>";
var uporabnik = "<?php echo $upime;?>";
socket.emit('newUser', uporabnik);
form.addEventListener('submit', function(e){
e.preventDefault();
if(input.value){
<?php last_action(); ?>
socket.emit('PosljiSporocilo', upime+input.value);
console.log(upime+input.value);
input.value = '';
}
});
socket.on('DobiSporocilo', Sporocilo => {
var item = document.createElement('li');
item.textContent = Sporocilo;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
socket.on('newUserJoined', joinedUser => {
var item = document.createElement('li');
item.textContent = joinedUser;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
</script>
答案1
得分: 1
我猜$upime变量保存了一个用户名，消息看起来像<li>userName:blah-blah-blah</li>。如果是这样，你需要修改消息监听器如下：
socket.on('DobiSporocilo', Sporocilo => {
var item = document.createElement('li');
item.textContent = Sporocilo;
if (Sporocilo.match(new RegExp("^" + upime))){ item.classList.add('my-message');}
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
并添加样式：
<style>
.my-message{
color:white;
}
</style>
英文:
I guess the $upime variable holds a username and messages looks like <li>userName:blah-blah-blah</li> If so, you need to modify on message listener this way
socket.on('DobiSporocilo', Sporocilo => {
var item = document.createElement('li');
item.textContent = Sporocilo;
if (Sporocilo.match(new RegExp("^"+upime)){ item.classList.add('my-message');}
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
and add style
<style>
.my-message{
color:white;
}
</style>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论