----上图

------MVC 创建的视图 ，视图名称为A
@{
Layout = null;
}

<!DOCTYPE html>
<style type="text/css">
* {
margin: 0;
padding: 0;
user-select: none;
box-sizing: border-box;
}

body {
background-color: #0581ca;
justify-content: center;
align-items: center;
display: flex;
min-height: 100vh;
}

.box {
background-color: white;
padding-top: 30px;
padding: 30px;
}

.box h2 {
margin-bottom: 40px;
text-align: center;
font-size: 26px;
color: #015a96;
font-family: sans-serif;
}

input {
padding: 20px;
user-select: none;
height: 50px;
width: 400px;
border-radius: 6px;
border: none;
border: 2px solid rgb(13, 152, 245);
outline: none;
font-size: 22px;
}

input::placeholder {
font-size: 23px;
}
#button {
font-family: sans-serif;
font-size: 15px;
margin-top: 40px;
border: 2px solid rgb(20, 139, 250);
width: 155px;
height: 50px;
text-align: center;
background-color: #0c81ee;
display: flex;
color: rgb(255, 255, 255);
justify-content: center;
align-items: center;
cursor: pointer;
border-radius: 7px;
}

.btn2 {
margin-left: 85px;
}

#button:hover {
color: white;
background-color: black;
}
</style>

<html>

<head>
<meta name="viewport" content="width=device-width" />
<title>A</title>
</head>

<body>
<div class="box">
<h2> | 随机密码生成器</h2>
<input type="text" name="" placeholder="创建密码" id="password" readonly>
<table>
<th><div id="button" class="btn1" onclick="genPassword()">生成</div></th>
<th><a id="button" class="btn2" onclick="copyPassword()">复制</a></th>
</table>
</div>
</body>
</html>
<script src="~/Scripts/paw.js"></script>

----------创建paw.js 脚本------------

var password = document.getElementById("password");
function genPassword() {
var chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var passwordLength = 12;
var password = "";
for (var i = 0; i <= passwordLength; i++) {
var randomNumber = Math.floor(Math.random() * chars.length);
password += chars.substring(randomNumber, randomNumber + 1);
}
document.getElementById("password").value = password;
}
function copyPassword() {
var copyText = document.getElementById("password");
copyText.select();
copyText.setSelectionRange(0, 999);
document.execCommand("copy");

}

使用 HTML、CSS 和 JavaScript 制作的随机密码生成器的更多相关文章

  1. 一起学HTML基础-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  2. HTML-利用CSS和JavaScript制作一个切换图片的网页

    由于个人原因,不详细写步骤 思路: 一.布局 二.制作图片区和按钮区的div及颜色.边框.背景属性等 三.用PS将四张图片剪切到同一个尺寸,重叠放置在图片切换区,透明度设置为0 四.点击对应按钮时,将 ...

  3. HTML、CSS、JavaScript网页制作从入门到精通 (刘西杰) pdf扫描版彩色版​

    html.css.JavaScript网页制作从入门到精通中从基础知识开始讲起,如html的基本标记.文字与段落标记.表格标记.超链接标记……同时介绍了目前流行的web标准与css网页布局实例,以及基 ...

  4. 解耦HTML、CSS和JavaScript

    当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML.CSS和JavaScript.随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需 ...

  5. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  6. 国内最火的 HTML、CSS、JavaScript 开源项目 Top 榜，你知多少？

    对于开发者而言,想要着手前端开发,HTML.CSS 和 JavaScript 是三项必备的基础技能.而如何事半功倍地掌握好这些知识?通过了解当下火热的开源项目不乏为最佳学习姿势.本文盘点国内评分最高且 ...

  7. HTML、 CSS、 JavaScript三者的关系 1

    HTML. CSS. JavaScript三者的关系 网页主要由三部分组成: 结构( Structure) . 表现( Presentation) 和行为( Behavior)    HTML —— ...

  8. 网页设计与开发——HTML、CSS、JavaScript (王津涛) pdf扫描版

    网页设计与开发——html.css.javascript从网页制作实际出发,除了详细地介绍html页面制作.css样式控制和javascript动态程序之外,还介绍了html 5.全书共分15章,各章 ...

  9. 网页设计与开发：HTML、CSS、JavaScript实例教程 (郑娅峰) pdf扫描版

    网页设计与开发:HTML.CSS.JavaScript实例教程从实用角度出发,详细讲解了HTML.CSS和JavaScript的基本语法和设计技巧,通过一个实用的班级网站的规划.设计.实现到发布过程, ...

  10. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

随机推荐

  1. vuex记录

    vuex就是vue中管理状态的地方,控制着组件之间的数据: 5大核心,通常只要有state和mutation就能满足vuex最基本的需求 1.state 项目存放各种状态的地方 2.mutation ...

  2. 前端之JavaScript（Js）基础

    JavaScript,简称Js HTML三把利剑之一,浏览器可解析Js,看着和Java像,实则和Java并无关系,和Python.Go.C++等都是一门独立的语言. 一种轻量级的编程语言. 可插入 H ...

  3. Linux环境使用Docker安装MongoDb

    系统环境: CentOS 7.6 64位(同样适用于Ubuntu) 安装步骤: 1.创建文件夹 /home/docker/mongo/config /home/docker/mongo/data 2. ...

  4. Node Sass version 7.0.1 is incompatible with ^4.0.0 node-sass 问题

    执行旧版项目安装依赖时报错 卸载 npm uninstall node-sass sass-loader 安装(need Python27) npm install sass-loader@7.3.1 ...

  5. 2022-4-8内部群每日三题-清辉PMP

    1.在创建最小可行产品(MVP)时,哪种方法至关重要? A.冒烟测试. B.演示. C.按版本发布. D.客户访谈. 2.敏捷项目团队决定修改使用中的测试过程,这一决定在哪一次会议上产生的? A.sp ...

  6. Nmap常见命令

    一测试环境 靶机:metasploitable2-linux  [下载地址]   IP:192.168.88.128 攻击机: kali   IP :192.168.88..131 二 Nmap命令 ...

  7. Software--Java--远程调试

    Java 远程调试的原理是两个 VM 之间通过debug 协议进行通信,然后以达到远程调试的目的.两者之间可以通过socket进行通信. 步骤: 1. 首先被 debug 程序的虚拟机在启动时要开启d ...

  8. HDFS学习记录

    HDFS 1.hdfs整体工作机制: 1>hdfs:分布式文件系统. hdfs:分布式文件系统 hdfs有着文件系统共同的特征: 2>有目录结构,顶层目录是:  / 3>系统中存放的 ...

  9. MySQL8.0的下载、安装、配置

    转1: MySQL8.0的下载.安装.配置 MySQL8安装教程(下载.安装.连接.卸载) Navicat Premium 15激活(含注册机)

  10. 第三课 Hello World显示

    HelloWorld 1.新建文件件 2.新建java文件 3.编写代码 public class Hello{ public static void main(String[] args){ Sys ...