----上图

------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. Python学习笔记组织文件之将美国风格日期的文件改名为欧洲风格的日期

    随笔记录方便自己和同路人查阅. #------------------------------------------------我是可耻的分割线--------------------------- ...

  2. 本地Map缓存

    package com.cars.forwardservice.controller;import org.springframework.stereotype.Controller;import o ...

  3. 【论文写作】Vancouver style

    参考文献引用风格之 Vancouver style 需要在引用出使用阿拉伯数字(1,2,3...)标注参考文献序号. 示例: Deep Learning [1]. Reference [1] LeCu ...

  4. WCF部署HTTP错误404.3

    错误:WCF部署HTTP错误404.3-Not Found 由于扩展配置问题而无法提供您请求的页面.如果该页面是脚本,请添加处理程序.如果应下载文件,请添加MIME映射. 解决步骤如下: 控制面板-& ...

  5. Little Girl and Maximum Sum CodeForces - 276C - 差分

    给定一个数列 \(a= { a_1,a_2,...,a_n }\) 以及 \(q\) 次查询. 其中第 \(i\) 次查询如同:\(l_i, r_i\),意指求 \(\sum_{j=l_i}^{r_i ...

  6. python 知识点总结

    第一张 1)变量 内存空间的表达式 命名要遵守规则 赋值使用 = 2)类型转换 str()将其他类型转成字符窜 int() 将其他类型转成整数 float()将其他类型转成浮点数 3)数据类型 整数类 ...

  7. 面试视频知识点整理1-13（mvvm框架）

    1.了解mvvm框架吗? Vue.js React Angular 2.谈谈你对mvvm的认识 由mvc和mvp演变而来 3.双向绑定是什么原理? object.defineProperty的用法要熟 ...

  8. [资料] 设计原理图资料保存：FMC210-1路1Gsps AD、1路2.5Gsps DA的FMC子卡解决方案

    FMC210-1路1Gsps AD.1路2.5Gsps DA的FMC子卡 一.板卡概述 FMC-1AD2DA是北京太速科技自主研发的一款1路1G AD采集.1路2.5G DA回放的FMC子卡.板卡采用 ...

  9. windows检查

    # coding: UTF-8 import psutil import platform import re def get_cpu_used(upu_base, interval=1): perc ...

  10. 使用easypoi 最原始的代码进行导出Excel

    首先,产品有需求,我们苦逼的程序员就得把需求实现.那么今天咱就把产品提的导出Excel的需求给他搞定.他的需求是这样的,很简单的Excel导出.样式如图所示:. 其实我们项目中的ExcelUtils工 ...