标签 Javascript 下的文章

编程笔记 html5&css&js 072 JavaScript BigInt数据类型

2024-08-07

在JavaScript中，BigInt是一种数字类型，用于安全存储大整数或任意精度的整数。它可以存储任意大的整数值，并且不会失去精度。

创建BigInt的方法很简单，只需在整数后面加上n即可。例如：




const largeNumber = 123456789123456789123456789n;
console.log(largeNumber); // 输出：123456789123456789123456789n

你也可以使用BigInt()构造函数创建BigInt：




const largeNumber = BigInt(123456789123456789123456789);
console.log(largeNumber); // 输出：123456789123456789123456789n

注意，使用BigInt()构造函数时，你需要确保传入的值可以被转换为一个字符串，这个字符串是一个有效的整数字面量，并且在字符串两侧加上一对空白符（例如空格，换行符等）以区分数字字面量和十六进制前缀。

BigInt与Number的转换：




const number = 123n;
const largeNumber = BigInt(number);
 
console.log(number); // 输出：123n
console.log(largeNumber); // 输出：123n

BigInt与Number之间不能进行直接的算术运算，需要先将BigInt转换为Number或将Number转换为BigInt。例如：




const largeNumber = 123456789123456789123456789n;
const smallNumber = 123;
 
// 将BigInt转换为Number
const largeNumberAsNumber = Number(largeNumber);
const smallNumberAsBigInt = BigInt(smallNumber);
 
// 进行算术运算
const sum = largeNumberAsNumber + smallNumber;
console.log(sum); // 输出：123456789123456790593n
 
const difference = largeNumber - smallNumberAsBigInt;
console.log(difference); // 输出：1234567891234567879859n

需要注意的是，JavaScript中的BigInt与Number是不同的类型，不能混用进行算术运算。在进行算术运算时，需要确保所有的数字都是同一种类型。

System

2024-08-07

所有,html5

以下是一个简单的HTML5生日快乐祝页面示例，使用HTML、CSS和JavaScript制作。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>婚礼倒计时</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f7f7f7;
    font-family: Arial, sans-serif;
  }
  .countdown {
    text-align: center;
    color: #333;
  }
  h1 {
    font-size: 3em;
    margin: 0.67em 0;
  }
  .timer {
    font-size: 2em;
  }
</style>
</head>
<body>
 
<div class="countdown">
  <h1>婚礼快到来啦！</h1>
  <div id="timer" class="timer"></div>
</div>
 
<script>
// 设置结婚的日期
const weddingDate = new Date('2023-08-08T20:00:00'); // 示例日期，请替换为你的结婚日期
 
function countdown() {
  const now = new Date();
  const distance = weddingDate - now;
 
  if (distance < 0) {
    clearInterval(intervalId);
    document.getElementById('timer').innerText = '欢喜庆祝！';
    return;
  }
 
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
  document.getElementById('timer').innerText = `${days} 天 ${hours} 小时 ${minutes} 分 ${seconds} 秒`;
}
 
countdown();
const intervalId = setInterval(countdown, 1000);
</script>
 
</body>
</html>

这段代码会在网页上显示一个倒计时，直至结婚的日期。你需要替换weddingDate变量的值为你自己的结婚日期。这个简单的例子使用了JavaScript中的Date对象来计算时间差异，并通过ID为timer的元素显示剩余时间。

System

2024-08-07

所有,html5

以下是一个使用原生JavaScript、HTML和CSS创建的简单的七夕情人节表白页面示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕情人节表白页面</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f7f7f7;
  }
  .heart-container {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
  .heart-container .heart {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.8);
    width: 200px;
    height: 200px;
    background: url('your-love-image.jpg');
    background-size: cover;
    border-radius: 50%;
    box-shadow: 0 0 10px #ffc0cb;
  }
  @keyframes rotate {
    0% {
      transform: rotateX(0) rotateY(0);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="heart-container">
  <div class="heart"></div>
</div>
<script>
// JavaScript 代码区域，可以添加更多的交互逻辑或功能，但这里保持简洁
</script>
</body>
</html>

这段代码创建了一个简单的表白页面，使用CSS3动画制作了一个旋转的爱心，背景是用一张图片填充的，你需要替换your-love-image.jpg为你们之间的爱情宣言照片。这个页面可以通过Web服务器访问，并在七夕当天给你的女朋友或者男朋友看。

- 阅读更多 -

Node JS 模块：NPM 发布 |发布 NPM 包

System

2024-08-07

所有,javascript

在Node.js中，你可以使用NPM（Node Package Manager）来发布你的包。以下是发布NPM包的基本步骤：

确保你已经在npm官网注册账号。
登录到你的npm账号。




npm login

确保你的包的package.json文件中的版本号是正确的，并且更新到你想要发布的版本。
确保你的包的README.md文件是存在的，因为npm会要求你有一个README文件。
在命令行中运行以下命令来发布你的包。




npm publish

如果你想更新你的包，你只需要更新package.json中的版本号，然后再次运行npm publish。

以下是一个简单的package.json文件示例：




{
  "name": "example-package",
  "version": "1.0.0",
  "description": "A sample Node.js package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "sample",
    "test"
  ],
  "author": "Your Name",
  "license": "ISC"
}

确保你的包中包含一个入口点文件，如index.js，并且它应该导出你想要公开的模块或函数。

System

2024-08-07

所有,html5

由于原代码较为复杂且涉及版权问题，我们将提供一个简化版的示例代码，演示如何使用JavaScript和Canvas创建一个基本的HTML5七夕情人节表白页面。




<!DOCTYPE html>
<html>
<head>
    <title>七夕情人节表白页面</title>
    <style>
        canvas {
            background-color: #000;
        }
    </style>
</head>
<body>
    <canvas id="space-canvas" width="800" height="600"></canvas>
    <script>
        // 获取Canvas元素
        var canvas = document.getElementById('space-canvas');
        var ctx = canvas.getContext('2d');
 
        // 绘制外太空表盘的函数
        function drawSpaceDisc(x, y, radius, color) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            ctx.fillStyle = color;
            ctx.fill();
        }
 
        // 绘制背景
        function drawBackground() {
            ctx.fillStyle = 'black';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
        }
 
        // 动画主循环
        function animate() {
            requestAnimationFrame(animate);
            drawBackground();
            // 绘制外太空表盘
            drawSpaceDisc(400, 300, 50, 'white');
            // 其他动画内容
        }
 
        // 启动动画
        animate();
    </script>
</body>
</html>

这个示例代码提供了一个简单的HTML页面，其中包含一个Canvas元素。我们定义了绘制外太空表盘的函数drawSpaceDisc，并在动画循环animate中调用它来不断更新页面。这个示例展示了如何使用Canvas基本绘图功能创建动态的视觉效果，并且展示了如何将其整合到一个HTML页面中。

System

2024-08-07

所有,html5

以下是一个简单的HTML5七夕情人节表白网页示例，使用了HTML、CSS和JavaScript来创建一个粉色樱花雨的3D相册效果。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕情人节表白网页</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    font-family: Arial, sans-serif;
  }
  .gallery {
    perspective: 1000px;
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  .album {
    width: 300px;
    height: 400px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(60deg) rotateY(-10deg);
    animation: rotate 10s infinite linear;
  }
  .photo {
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
    box-shadow: 0 0 5px #fff;
    backface-visibility: hidden;
    transition: transform 1s;
  }
  .album:hover .photo:nth-child(1) { transform: rotateY(0deg) translateZ(300px); }
  .album:hover .photo:nth-child(2) { transform: rotateY(36deg) translateZ(300px); }
  .album:hover .photo:nth-child(3) { transform: rotateY(72deg) translateZ(300px); }
  .album:hover .photo:nth-child(4) { transform: rotateY(108deg) translateZ(300px); }
  .album:hover .photo:nth-child(5) { transform: rotateY(144deg) translateZ(300px); }
  .album:hover .photo:nth-child(6) { transform: rotateY(180deg) translateZ(300px); }
  .album:hover .photo:nth-child(7) { transform: rotateY(216deg) translateZ(300px); }
  .album:hover .photo:nth-child(8) { transform: rotateY(252deg) translateZ(300px); }
  .album:hover .photo:nth-child(9) { transform: rotateY(288deg) translateZ(300px); }
  .album:hover .photo:nth-child(10) { transform: rotateY(324deg) translateZ(300px); }
  @keyframes rotate {
    from { transform: translate(-50%, -50%) rotateX(60deg) rotateY(-10deg); }
    to { transform: translate(-50%, -50%) rotateX(60deg) rotateY(360deg); }
  }
</style>
</head>
<body>
<div class="gallery">
  <div class="album">
    <div class="photo" style="background-image: url('photo1.jpg');"></div>
    <div class="photo" style="background-image: url('photo2.jpg');"></div>
    <div class="photo" style="background-image: url('photo3.jpg');"></div>
    <div class="photo" style="background-image: url('photo4.jpg');"></div>
    <div class="photo" style="background-image: url('photo5.jpg');"></div>
    <div class="photo" style="ba

System

2024-08-07

所有,html5

以下是一个简单的HTML5七夕情人节表白网页示例，使用了HTML、CSS和JavaScript。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>七夕情人节表白</title>
<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url('background.jpg') no-repeat center center fixed;
    background-size: cover;
    font-family: Arial, sans-serif;
  }
  .heart {
    position: relative;
    width: 200px;
    height: 200px;
    background: #f00;
    animation: beat 0.6s infinite;
  }
  @keyframes beat {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  .heart::before,
  .heart::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50px;
    width: 50px;
    height: 80px;
    background: #f00;
    border-radius: 50px 50px 0 0;
    transform: rotate(-45deg);
  }
  .heart::after {
    left: 0;
    transform: rotate(45deg);
  }
  h1 {
    color: white;
    font-size: 48px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
</style>
</head>
<body>
<div class="heart">
  <h1>我喜欢你</h1>
</div>
</body>
</html>

这段代码创建了一个简单的表白网页，背景是一个心形的div，上面有“我喜欢你”的文字。通过CSS样式，心形会有跳动的动画效果，同时背景图片将充当整个网页的背景。这个示例简单易懂，易于理解和修改。

- 阅读更多 -

js正则对身份证号的判断

System

2024-08-07

所有,jquery

在JavaScript中，可以使用正则表达式来验证身份证号码是否有效。中国的身份证号码由18位数字组成，前17位为数字，最后一位为数字或字母X（大写），并且包含一定的校验逻辑。以下是一个简单的正则表达式用来验证身份证号码的有效性：




function isValidID(id) {
  const pattern = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
  return pattern.test(id);
}
 
// 测试
console.log(isValidID('123456789012345678')); // false
console.log(isValidID('12345678901234567X')); // true
console.log(isValidID('123456789012345678X')); // true

这个函数isValidID接收一个身份证号码作为参数，并返回一个布尔值，表示该号码是否有效。正则表达式中包含了对于格式的校验，但不包含对于校验码的校验，因为校验码需要计算才能验证。如果需要包含校验码的校验，这个正则表达式将会更复杂。

- 阅读更多 -

html、css、js、jquery基础（华清远见）

System

2024-08-07

所有,jquery

您的问题似乎是在询问如何使用HTML、CSS、JavaScript和jQuery来创建一个简单的网页。以下是一个简单的示例，展示了如何结合使用这些技术来创建一个包含基本布局和交互的网页。




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单示例</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
        }
        .highlight {
            background-color: yellow;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('button').click(function() {
                $('.highlight').toggleClass('highlight');
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <h1>华清远见</h1>
        <p class="highlight">这是一个段落。</p>
        <button>高亮显示</button>
    </div>
</body>
</html>

这个示例包括了基本的HTML结构、内联CSS样式和jQuery代码，用于切换段落的高亮显示。当用户点击按钮时，.highlight 类会被添加或移除，从而改变段落的样式。

System

2024-08-07

所有,jquery

协同过滤算法是推荐系统中的一个重要算法，可以帮助用户发现他们可能喜欢的物品，这种方法的核心是计算用户间的相似性，然后根据这些相似性来推荐物品。

下面是一个简化版的Spring Boot新闻管理系统的核心代码，展示了如何使用MyBatis和Spring Boot创建一个简单的新闻管理系统。




// NewsController.java
@RestController
@RequestMapping("/news")
public class NewsController {
 
    @Autowired
    private NewsService newsService;
 
    @GetMapping("/{id}")
    public ResponseEntity<News> getNewsById(@PathVariable("id") Long id) {
        return ResponseEntity.ok(newsService.getNewsById(id));
    }
 
    @PostMapping("/")
    public ResponseEntity<News> createNews(@RequestBody News news) {
        return ResponseEntity.ok(newsService.createNews(news));
    }
 
    // ... 其他CRUD操作
}
 
// NewsService.java
@Service
public class NewsService {
 
    @Autowired
    private NewsMapper newsMapper;
 
    public News getNewsById(Long id) {
        return newsMapper.selectByPrimaryKey(id);
    }
 
    public News createNews(News news) {
        newsMapper.insertSelective(news);
        return news;
    }
 
    // ... 其他CRUD操作
}
 
// NewsMapper.java
@Mapper
public interface NewsMapper {
 
    @Select("SELECT * FROM news WHERE id = #{id}")
    News selectByPrimaryKey(Long id);
 
    @Insert("INSERT INTO news(title, content) VALUES(#{title}, #{content})")
    @Options(useGeneratedKeys=true, keyProperty="id")
    void insertSelective(News news);
 
    // ... 其他CRUD操作的SQL映射
}
 
// News.java (假设有title和content字段)
public class News {
    private Long id;
    private String title;
    private String content;
 
    // 省略getter和setter方法
}

在这个例子中，我们创建了一个简单的新闻管理系统，包括了新闻的增删改查操作。使用了Spring Boot的自动配置功能，通过@RestController和@Service注解，我们可以快速地创建RESTful API和服务层，并通过MyBatis完成数据库的交互。

这个例子展示了如何将Spring Boot和MyBatis结合起来，快速开发一个简单的Web应用。在实际的应用中，你可能需要添加更多的功能，比如用户管理、评论管理、以及更复杂的推荐系统实现。

- 阅读更多 -