HTML、CSS 和 JavaScript 中的所有唯一字符挑战
2022/9/5 1:24:58
本文主要是介绍HTML、CSS 和 JavaScript 中的所有唯一字符挑战,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
HTML、CSS 和 JavaScript 中的所有唯一字符挑战
HTML:
<div class="wrapper"> <h1>所有独特的字符</h1><br> <p>来自<a href="https://buttondown.email/cassidoo/archive/keep-your-face-always-toward-the-sunshine-and/">Cassidy Williams 时事通讯</a>的提示:<br>编写一个函数,确定是否所有<br>给定字符串中的字符是唯一的。</p><br> <form class="form-start"> <input type="text" class="text" id="unique-text" placeholder="Insert your text" pattern="^[^\s].[A-Za-z\s]+[^\s]$" focus required> <input type="button" class="btn" id="submit" onclick="displayResult()" value="Check Unique Text"> </form> </div>
CSS:
* { 边距:0; 填充:0; 字体系列:无衬线; } 身体 { 高度:100vh; 显示:弯曲; 弹性方向:列; 证明内容:中心; 对齐项目:居中; 溢出:隐藏; 背景颜色:#ffffff; 背景图像:径向渐变(黑色 1px,透明 1px), 径向渐变(黑色 1px,白色 1px); 背景尺寸:54px 54px; 背景位置:0 0, 27px 27px; } .wrapper { 显示:弯曲; 弹性方向:列; 对齐项目:居中; 边框:5px 纯黑色; 背景颜色:白色; 盒子阴影:20px 15px 0 灰色; 填充:50px; 边距:50px; } p { 文本对齐:居中; } .form-start { 显示:弯曲; 证明内容:中心; 边距:0; 盒子阴影:20px 15px 0 灰色; } 。文本, .文本:焦点{ 边框:5px 纯黑色; 边界半径:无; 大纲:无; 背景颜色:白色; 填充:8px 16px; } .btn { 光标:指针; 边框:无; 字体粗细:粗体; 白颜色; 背景颜色:黑色; 填充:8px 16px; } .btn:悬停{ 变换:翻译(5px,5px); } 。确认的 { 盒子阴影:20px 15px 0 绿色; } .拒绝{ 盒子阴影:20px 15px 0 红色; }
JavaScript:
// https://patrikrizek.github.io/ 控制台.clear(); 常量 { 核心:{描述,它,期望,运行}, 美化 } = 窗口.isLite; document.addEventListener("keypress", function (event) { if (event.key === "Enter") { event.preventDefault(); document.getElementById("提交").click(); } }); 函数显示结果(){ const uniqueText = document.getElementById("unique-text").value; const 同意包装器 = document.querySelector(".wrapper"); 常量同意表单 = document.querySelector(".form-start"); const charactersOnly = /^[A-Za-z\s]+$/; 如果(!charactersOnly.test(uniqueText)){ document.getElementById("唯一文本").select(); alert("只允许字母。开头和结尾没有空格。"); } 别的 { 同意Wrapper.classList.remove("确认", "拒绝"); 同意Form.classList.remove("确认", "拒绝"); 如果(testUniqueChars(uniqueText)){ 同意Wrapper.classList.add("确认"); 同意Form.classList.add("确认"); } 别的 { 同意Wrapper.classList.add("拒绝"); 同意Form.classList.add("拒绝"); } } } 功能 testUniqueChars(文本){ // 这是你编写实现的地方,CodePen Challenge 朋友们! 常量唯一 = 新设置(文本); 返回 text.length == unique.size; } // 如果您选择使用测试套件,这些是您试图通过的测试。 描述(“testUniqueChars”,()=> { it("有独特的字符", () => { 期望(testUniqueChars(“代码”)).toBe(真); 期望(testUniqueChars(“笔”)).toBe(真); 期望(testUniqueChars("CodePen")).toBe(false); 期望(testUniqueChars(“挑战”)).toBe(假); }); });
HTML、CSS 和 JavaScript 代码片段开启, AllWebCodes.com
完毕!享受 所有独特角色挑战片段
现在下载
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明
本文链接:https://www.qanswer.top/12238/50160411
这篇关于HTML、CSS 和 JavaScript 中的所有唯一字符挑战的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-04-26敏捷开发:想要快速交付就必须舍弃产品质量?
- 2024-04-26静态代码分析的这些好处,我竟然都不知道?
- 2024-04-26你在测试金字塔的哪一层?(下)
- 2024-04-26快刀斩乱麻,DevOps让代码评审也自动起来
- 2024-04-262024年最好用的10款ER图神器!
- 2024-04-2203-为啥大模型LLM还没能完全替代你?
- 2024-04-2101-大语言模型发展
- 2024-04-17基于SpringWeb MultipartFile文件上传、下载功能
- 2024-04-14个人开发者,Spring Boot 项目如何部署
- 2024-04-14RAG应用开发实战02-相似性检索的关键 - Embedding